Plugins

YoxView can create galleries using its own plugins. By specifying a URL in Picasa, Flickr or YouTube, YoxView fetches (using AJAX) the images or videos from the specified URL and creates thumbnails on the page. Clicking on the thumbnails opens YoxView, of course.

Some examples:

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

Usage instructions

Contents 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
YouTube User/Channel http://www.youtube.com/user/amandapalmer
Playlist http://www.youtube.com/my_playlists?p=1774443948BF0170
Search http://www.youtube.com/results?search_query=breaking+bad&aq=f
Single video http://www.youtube.com/watch?v=cKUvKE3bQlY

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's 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"
    }
});

Thumbnails options

Demo: Customizing thumbnails #1 Second demo: Customizing thumbnails #2

The following options are available to customize how thumbnails are rendered. These should be specified in an object named thumbnailsOptions (view the demos the see script examples).

Option name Type Default value Description
addEllipsis Boolean true If set to false, an ellipsis (�) isn't added after shortened titles or descriptions.
descriptionMaxLength Number - The maximum number of characters for the description text in thumbnails. Descriptions longer than this are shortened and unless specified otherwise, an ellipsis (…)  is added.

Note that this affects only the description inside thumbnails, not inside the viewer.
descriptionsClass String - An optional class for description. See titlesClass below for more info.
descriptionsElement String "<div>" The element type to use for rendering descriptions, if setDescriptions is set to true.
headerClass String - An optional class for the header. See setHeader below for more info.
headerElement String "<h2>" The element type of the header, if one is rendered (see setHeader below).
setDescriptions Boolean false If true and an image/video has a description (currently supported with Flickr or YouTube), the description is added inside the thumbnail.
setHeader Boolean false If true and a title for the displayed content is available, renders the title as an <H2> (or any other element type, as specified with headerElement) above the thumbnails.
setTitles Boolean false If true and an image/video has a title, the title is added inside the thumbnail, after the image.
thumbnailsClass String "yoxview_thumbnail" A class for the rendered thumbnails.
titleMaxLength Number - The maximum number of characters for the title text in thumbnails. Titles longer than this are shortened and unless specified otherwise, an ellipsis (�)  is added.

Note that this affects only the title inside thumbnails, not inside the viewer.
titlesClass String - An optional class for titles. For example, if setTitles is set to true and this parameter is set to "thumbnailTitle", the markup of the rendered thumbnails would look like this: 
<a href="http://picasaweb.google.com/yoxigen/Plants" class="yoxview_thumbnail">
    <img src="http://lh5.ggpht.com/.../s104-c/Plants.jpg" alt="Plants" title="Plants" />
    <span class="thumbnailTitle">Plants (46 images)</span>
</a>
titlesElement String "<span>" The element type to use for rendering titles, if setTitles is set to true.


The following data options and events 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
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
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.
YouTubeMore info on YouTube's API
Option name Type Default value Description
aspectRatio String/Number "auto" The aspect ratio of the displayed vides. Possible values:
  • "auto" - YoxView will try to figure out the aspect ratio of the video, either 4:3 or 16:9, according to data received from YouTube. This should work fairly well, but not always, especially for older videos (uploaded a long time ago to YouTube).
  • String - A string representation of the width/height ratio, in the "width:height" format. Examples: "16:9", "4:3", "1:1".
  • Number: A numeric value that represents the width/height ratio. Examples: 16/9, 1.33, 0.7 (portrait orientation).
category String - An optional parameter, for searches. Set the category to search for videos limited to the category. More info
height Number - The maximum height, in pixels, of the videos to display. The height can be set to a specific value, while the width is left out, to display videos with a fixed height (according to the aspect ratio).
hqThumbnails Boolean false If set to true, the plugin generates large thumbnails, about 480x360 pixels. Otherwise, small thumbnails of 120x90 (or thereabouts) are generated.
max-results Number 25 The maximum number of videos to retrieve. Valid values are from one to 50.
orderby String 'relevance' / 'position' The method to order results by. Valid values include: relevance (default), published (chronological), viewCount, rating.

For playlists only: position (default), commentCount, duration, title.

 More info
start-index Number 1 The offset for retrieved results. Set to 10, for example, to start retrieving from the 10th available video. (1-based, not 0-based!)
width Number 720 The maximum width, in pixels, of the videos to display. The width can be set to a specific value, while the height is left out, to display videos with a fixed width (according to the aspect ratio).

If neither the width nor the height are set, the width will be set to 720 pixels and the height will depend on the aspect ratio.