Plugins

YoxView is capable of displaying images from external sources, such as Picasa or Flickr. This means that you can integrate your existing image gallery in any website and display it with YoxView.

Some examples: My Picasa gallery, Picasa album, Flickr search, Flickr photostream.

Try it yourself:
(Click on the thumbnails to load YoxView)
Loading...

Plugins enable YoxView to receive image data from sources other than the page's thumbnails. This can be done using AJAX, JSON or any other way.

Plugins are found in the data folder, and should be named by their respective data sources (e.g 'picasa.js', 'flickr.js', etc.). Each plugin gets the images data from its source and returns it as a JSON object to the YoxView engine.


Usage instructions

Images from outside sources can be retrieved using the dataUrl option, by copying a URL from one of the supported data sources. Here's an example of adding an album from picasa to your web page (the scripts can be either in the HEAD or BODY of your page):

<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#yoxview_picasa").yoxview({ 
            dataUrl: 'http://picasaweb.google.com/yoxigen/Trips'
        });
    });
</script>

<div id="yoxview_picasa"></div>
Demo: Using the YoxView plugins Currently supported data URL's (click on links to see it in action):
Provider Function Example URL
Picasa User (displays albums) http://picasaweb.google.com/yoxigen
Album http://picasaweb.google.com/yoxigen/Trips
Search http://picasaweb.google.com/lh/view?q=alice+in+chains&max-results=20
Flickr User photostream http://www.flickr.com/photos/federic73/
User photosets http://www.flickr.com/photos/federic73/sets/
Photoset http://www.flickr.com/photos/nivshon/sets/72157594175687442/
Gallery http://www.flickr.com/photos/lovepinlac/galleries/72157622717078782/
Search http://www.flickr.com/search/?q=cute+cats&per_page=30

The div may contain other content, yoxview will append the thumbnails as anchors to the div.


Plugin options

Options for plugins can be specified in two ways - as part of the dataurl query string or using the dataSourceOptions option:
  1. Querystring: 
    $(".yoxview").yoxview({
    dataUrl: 'http://picasaweb.google.com/yoxigen/Trips?max-results=10&imgmax=800'
});
  2. dataSourceOptions: 
    $(".yoxview").yoxview({
    dataUrl: 'http://picasaweb.google.com/yoxigen/Trips',
    dataSourceOptions: {
        "max-results": 10,
        imgmax: 800
    }
});
Here's an example of getting images from Flickr and specifying some options (get 20 images, with no offset, get the large version of each image, rather than the default medium): 
$("#yoxview_flickr").yoxview({
    dataUrl: 'http://www.flickr.com/photos/federic73/',
    dataSourceOptions: {
        "per_page": 20,
        "page": 1,
        "imageSize": "large"
    }
});
The following data options are available for all plugins:
Option name Type Default value Description
onLoadBegin Function null Event handler to call in plugins, when loading begins in AJAX, for example. Using this delegate, you can start a loading animation, for example.
onLoadComplete Function null Event handler to call when loading finishes.
onLoadError Function null Event handler to call when the plugin encountered an error. The function receives one parameter, a string describing the error, which the plugin may provide.
onNoData Function null Event handler to call in case the plugin found no data to display.


Datasource-specific options:

Picasa Picasa icon
Option name Type Default value Description
album String null Name of the album whose images to get. The name can be found in the URL in Picasa, as a folder after the user name.
authkey String - For displaying unlisted albums, you need to specify this parameter in dataSourceOptions or dataUrl. The authkey can be retrieved from the URL when you are viewing an unlisted album:

http://picasaweb.google.com/username/AlbumName?authkey=Gv1sRgCP_t-MK8_ouDZg#

(Without the '#')
imgmax Number screen.width

If set, specifies a maximum size, in pixels, for the image's largest side. If you don't specify this or if you specify a number larger than the screen's width, the plugin sets the screen's width, to prevent getting images larger than the display area, thus saving bandwidth and resources - great for small devices like PDAs, iPhones, netbooks, etc.

Possible values: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
max-results Number - The maximum number of images to retrieve from Picasa.
setSingleAlbumThumbnails Boolean true If true and displaying a single album, adds thumbnails for all the album's images. If false, use the setThumbnail option to decide whether to display a thumbnail.
setThumbnail Boolean true If true and displaying a single album, adds a thumbnail for the album. If not, just returns the images data to the YoxView engine.
start-index Number 1 The offset for retrieved results. Set to 10, for example, if you don't want to retrieve the first 9 images. (1-based, not 0-based!)
thumbsize Number 64/104

The size for the thumbnails to create. There are two default sizes:
64 - thumbnails for images
104 - thumbnails for albums

You can add the letter 'u' after the number, to specify that the thumbnails should not be cropped to a square (just remember that in this case, it's a string, not a number) or the letter 'c' to force crop: 

thumbsize: '104u'
Possible values : 32, 48, 64, 72, 104, 144, 150, 160
user String null The name of the user whose images/albums to get. If no album is specified, returns a list of albums for the user and creates thumbnails for each. Clicking on each album displays all the images in the album. If an album is specified, displays the album's images as thumbnails.

Flickr flickr icon
Option name Type Default value Description
extras String 'description' This option specifies that YoxView should get the description field of images. Set it to "none" or an empty string if you don't wish to display the description.
imageSize String 'medium' The size of the images to get from Flickr. Possible values: 'medium', 'large', 'original':

medium: 500px largest side
large: 1024px
original: original size of the image that's been uploaded to Flickr.

If you specify 'large' or 'original', retrieving large sizes (large than 1024 pixels) must be enabled in the requested gallery in Flickr. Otherwise, you'll get an error saying that the photo isn't found.
method String 'flickr.photosets.getList' The method sent to the Flickr API for retrieving data.
page Number 1 The number of the page to retrieve images for, when using the per_page option. Use this if you want to offset your results.
per_page Number 100 If specified, limits the number of images retrieved from Flickr. Can be offset with the page option. Max value allowed is 500.
photoset_id String null A flickr set ID (number), for which to get images. You can get it from the URL when you're in a set's page in flickr:

http://www.flickr.com/photos/user/sets/PHOTOSET_ID/
setSinglePhotosetThumbnails Boolean true If true and displaying a single set, adds thumbnails for all the set's images. If false, use the setThumbnail option to decide whether to display a thumbnail.
setThumbnail Boolean true If true and displaying a single set, adds a thumbnail for the set. If not, just returns the images data to the YoxView engine.
sort String 'relevance' Sort options for the images retrieved when doing a search (not relevant for photostreams, sets, etc.). Possible values:
  • date-posted-asc
  • date-posted-desc
  • date-taken-asc
  • date-taken-desc
  • interestingness-desc
  • interestingness-asc
  • relevance (default for search)
thumbsize String 'smallSquare' The size for thumbnails. Available sizes:
  • smallSquare: 75x75 pixels
  • thumbnail: 100px largest side
  • small: 240px largest side
user String null A flickr user name (not necessarily login name) or NSID. The name that shows in Flickr as USERNAME's Photostream. If no photoset_id is specified, the plugin returns a list of sets for the user and creates thumbnails for each. Clicking on each set displays all the images in the set. If a set is specified, displays the sets's images as thumbnails.