YoxView Installation Instructions

For full usage instruction, demos and information, please refer to the YoxView usage page.

1. Prepare your thumbnails
2. Load YoxView
3. Options
4. Plugins (Picasa/Flickr)

Installation

1. Create your thumbnails

   Your thumbnails should be placed inside a container and link to their respective full-size images, like this:

   <div class="yoxview">
       <a href="img/01.jpg"><img src="img/thumbnails/01.jpg" alt="First" title="First image" /></a>
       <a href="img/02.jpg"><img src="img/thumbnails/02.jpg" alt="Second" title="Second image" /></a>
   </div>
   

   The viewer displays the TITLE attribute of the image tag as the image's title inside the viewer, so it's recommended to use it.

   Note - If you use YoxView's plugins to get your images from Flickr/Picasa, it creates the thumbnails for you, so you can bypass this step.

2. Include the YoxView script in your page

   Put the following line in the HEAD section of your page (just make sure that the SRC points to the correct folder):
   

   <script type="text/javascript" src="yoxview/yoxview-init.js"></script>

3. Apply YoxView to  the element that contains your thumbnails

   • Simple use (use if you don't know jQuery or as a shortcut):

     First make sure that the element containing your thumbnails has the class "yoxview", like shown above (<div class="yoxview">). Then, open the file yoxview-init.js and uncomment the last line:
     

     LoadScript(yoxviewPath + "yoxview-nojquery.js");

   • Regular jQuery plugin use:

     (Don't forget to call it from within $(document).ready!)

     $("#thumbnails").yoxview([options]);

Demo: Basic installation and usage

3. Options

You can specify options when calling YoxView, either from your script or, if you're using the yoxview-nojquery.js file, from there.

$("#thumbnails").yoxview({
    backgroundColor: 'Blue',
    playDelay: 5000
});

Demo: Using options
For a full list of available options click here.

4. Plugins

Demo: Using the YoxView plugins
For complete information and usage instructions for YoxView plugins, click here.

YoxView is capable of displaying images from external sources, such as Picasa or Flickr. Images and information about them are retrieved using AJAX (or JSONP) and thumbnails are then created in the page.

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>

Click here for a full list of supported data URL's.

Last update to this file: May 20th, 2010