Instashow Widget
An instashow allows you to display any set of pictures as a PhotoShow, using any of PhotoShow's One Click Styles to create a compelling experience.
Instashows don't require any effort by users to author a PhotoShow; instead, the show is available automatically and instantly. In addition, because instashows are rendered on-the-fly, they're great for displaying frequently-updated sets of photos.
Instashows can be incorporated into your web site by adding some simple JavaScript code to any HTML page. With optional additional customization, you can also support user-editable instashows.
Getting Started
An instashow gets its list of pictures from an RSS feed -- specifically, a Media RSS feed. Media RSS is already used by many popular photo sites. If your platform doesn't already offer it (many do), you can easily construct a Media RSS feed from a list of pictures using the instructions below.
Once you have a Media RSS feed, including an instashow in your site is as easy as adding the following lines of HTML:
<script type="text/javascript" src="http://cdn.photoshow.com/api/widgets/instashow.0.1.0.js"></script>
...
<div id="YOUR_DIV_ID">
<!-- The instashow will get embedded here -->
</div>
<script type="text/javascript">
var configOptions = {
rssFeed: "http://api.flickr.com/services/feeds/photos_public.gne?tags=watermelon&format=rss_200",
style: "Simple Show",
developerKey: "YOUR_DEVELOPER_KEY",
divId: "YOUR_DIV_ID"
};
PhotoShow.widgets.embedInstaShow(configOptions);
</script>
This particular example adds an instashow of all recent Flickr photos that have been tagged with "watermelon". By changing the rssFeed option to point to your own feed, you can include any pictures you want.
While this is the simplest example of an instashow, there are many options available to customize the show to your exact specifications. For example, you can control the size of the Viewer, select a particular One Click Style, control the show's title and display of captions, etc. Full details are in the API Reference.
Get the Code
More Information
Providing a List of Pictures as a Media RSS Feed
Instashow accepts the commonly-used Media RSS format, which is a standard RSS feed with media-specific extensions.
If you do not have a Media RSS feed of your pictures available, you can construct one for instashow with minimal effort. Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<title>Photos from everyone tagged beach</title>
<item>
<title>Lefkas Island [29.9.07]</title>
<media:content url="http://farm3.static.flickr.com/2321/1815548035_b25e6c9d2d_o.jpg"
type="image/jpeg" height="1360" width="2048"/>
</item>
<item>
<title>morning stroll</title>
<media:content url="http://farm3.static.flickr.com/2299/1815475677_94c8fc7020_o.jpg"
type="image/jpeg" height="768" width="1024"/>
</item>
<!-- etc. -->
</channel>
</rss>The key elements of this (partial) Media RSS feed are:
<title>- The top-level title will be used as the title of the PhotoShow.
<item>- You'll need an item section for each picture. Within the item:
<media:content url=.../>- The media:content tag within each item identifies a picture to include in the show. You must supply the type="image/jpeg" attribute for each JPG picture. The width and height attributes are optional.
<title>- The title within each item supplies the caption for the picture. These captions are optional; you can omit the title tag within any item if you don't have or want a caption for it.
While the example RSS will generate a proper PhotoShow, note that it is incomplete -- there are many additional fields required for a valid RSS feed. If you are only using the feed for instashow, you do not need to supply a complete feed. If you would like to reuse your feed elsewhere, you should add the additional information to make it valid.
Picture Servers Need crossdomain.xml File
There is one additional requirement for instashow: you must host a file named "crossdomain.xml" on any servers that will supply pictures to the instashow. (That is, any servers that are referenced in the url attributes of the media:content tags in your RSS feed.)
This is a requirement imposed by Adobe Flash. Because the PhotoShow Viewer Widget is served from the photoshow.com servers, while the photos in the instashow are served from your own servers, the Flash Player needs permission from your site to give the PhotoShow Viewer access to pictures from your server. The crossdomain.xml policy file provides that permission.
Place the following text, verbatim, in a file named "crossdomain.xml" in the root web directory of your server. (E.g., it must appear at http://your-image-server.your-domain.com/crossdomain.xml.)
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>You'll find this type of crossdomain security policy file on many sites' public web servers (e.g., http://farm3.static.flickr.com/crossdomain.xml). If you are attempting to use instashow with an image web server that is not accessible to the public internet, or on a domain whose cookies store user session credentials, you should read Adobe's documentation at Adobe's site for more details.
Comments