Current Version v. 1.0 r.c.

Menu

Latest news

  • WebTwo Ajax SlideShow version 1.0 r.c. is online!

Configuration options


Here you go with a list of configurable options

  • bgcolor - any HTML color (Hex/Named)
  • width - a number representing SlideShow width in pixel
  • height - a number representing SlideShow height in pixel
  • left_divisor - a number representing the percentage of right thumbnail strip
  • autoLoad - boolean wether or not to show first picture upon load
  • autoSlideShow - boolean wether or not to automatically start SlideShow - NOT YET FULLY SUPPORTED
  • singleClickCommands - boolean wether or not commands work with single click
  • inDirection - string representing the direction the picture follow when appearing (Possible values are: 'left' 'right' 'up' 'down' 'leftup' 'leftdown' 'rightup' 'rightdown' 'default')
  • outDirection - string representing the direction the picture follow when disappearing (Possible values are: 'left' 'right' 'up' 'down' 'leftup' 'leftdown' 'rightup' 'rightdown' 'default')
  • spinner - animated activity indicator location
  • statusTexts - this is an array of texts strings indicating different SlideShow status
    1. SlideShow loading thumbnails
    2. SlideShow loading picture
    3. SlideShow picture loaded
    4. SlideShow loading more detailed picture
    5. SlideShow more detailed picture loaded
    6. Picture not found on server
    Be careful, as when titles are available (limited to flickr mode only so far) message 3 and 5 are not showed.
  • useFlickr - boolean, wether or not to use flickr.com picture search
  • images - array of arrays representing the pictures to load
    first picture of every sub array is considered to be the thumbnail
    second picture of every sub array is considered to be the initial picture
    subsequent pictures of every sub array are loaded dinamically when user zoom in
    You MUST sppecify at least 2 pictures for every sub array. They can be the same thou.
    Example:
    [
    ['myPicture_small.jpg','myPicture.jpg'],
    ['myPicture2_small.jpg','myPicture2.jpg'],
    ];
  • more to come...

Configuration basics


First of all, there are 2 ways to configure your SlideShow

Inline configuration example - very deprecated

In you html page, create a div with a unique id:

<div id="destination"> </div>

then, once your page is loaded, via a link, or via an "onload" event attached to the body, create an object with all your options and start your SlideShow:

        <script language="JavaScript">
            
            var options = {
                width: 600,
                height: 500,
                images: [
                                ['myPicture_small.jpg','myPicture.jpg'],
                                ['myPicture2_small.jpg','myPicture2.jpg'],
                            ];
                background: 'black',
                left_divisor: 5,
                autoLoad: false,
                autoSlideShow: false,
                singleClickCommands: true,
                inDirection: random,
                outDirection: random,
                spinner: 'images/indicator.black.gif',
                statusTexts: [
                        'Loading thumbnails..',
                        'Please wait...',
                        'Ready',
                        'Loading more detailed picture',
                        'Ready',
                        'Error: image not found!'
                        ]
                        
                    };
        
            new SlideShow('destination', options);
         </script>
        
Your SlideShow will then appear on your page.... but this it very tricky, and I strongly discourage this way!

XML configuration example - Basic

In you html page, create a div with a unique id:

<div id="destination"> </div>

then, once your page is loaded, via a link, or via an "onload" event attached to the body, start your SlideShow by specifying the url of a XML file:

        <script language="JavaScript">
        new SlideShow('destination', { url: 'conf.xml' });
         </script>
        

Here is an example of "conf.xml" XML file

<?xml version="1.0" encoding="utf-8" ?> 
<slideshow type="object">
    <options>
        <bgcolor>black</bgcolor>
        <left_divisor>5</left_divisor>
        <versionText><![CDATA[ SlideShow!  ]]></versionText>
        <width>600</width>
        <height>200</height>
        <autoLoad type="bool">false</autoLoad>
        <autoSlideShow type="bool">false</autoSlideShow>
        <singleClickCommands type="bool">true</singleClickCommands>
        <inDirection>down</inDirection>
        <outDirection>down</outDirection>
        <spinner>images/indicator.black.gif</spinner>
        <statusTexts type="js"><![CDATA[ 
        [
            'Loading thumbnails..',
            'Please wait...',
            'Ready',
            'Loading more detailed picture',
            'Ready',
            'Error: image not found!'
        ]
	]]></statusTexts>
    </options>
    
    <slides>
        <slide>
            <image>myPicture_small.jpg</image>
            <image>myPicture.jpg</image>
        </slide>
        <slide>
            <image>myPicture2_small.jpg</image>
            <image>myPicture2.jpg</image>
        </slide>
    </slides>
</slideshow>
        
Et voilà, your SlideShow will just start!

XML configuration example - Advanced

Given that you have understood the previous example, the following one demonstrates how to use XML configuration to access a Flickr.com stream or, maybe, just search the photos via Flickr.com public APIs.

<div id="destination"> </div>

then, once your page is loaded, via a link, or via an "onload" event attached to the body, start your SlideShow by specifying the url of a XML file:

        <script language="JavaScript">
        new SlideShow('destination', { url: 'conf.xml' });
         </script>
        

Here is an example of "conf.xml" XML file

<?xml version="1.0" encoding="utf-8" ?> 
<slideshow type="object">
    <options>
        <bgcolor>black</bgcolor>
        <left_divisor>5</left_divisor>
        <versionText><![CDATA[ SlideShow!  ]]></versionText>
        <width>600</width>
        <height>400</height>
        <autoLoad type="bool">true</autoLoad>
        <autoSlideShow type="bool">false</autoSlideShow>
        <singleClickCommands type="bool">true</singleClickCommands>
        <inDirection>down</inDirection>
        <outDirection>down</outDirection>
        <useFlickr type="bool">true</useFlickr>
	<flickrUrl>flickr.com.php</flickrUrl>
        <flickrKey>PUT_API_KEY_HERE</flickrKey>
        <flickrTags>ajax+javascript</flickrTags>
        <flickrTagMode></flickrTagMode>
        <flickrPerPage>100</flickrPerPage>
        <flickrUserId></flickrUserId>
        <flickrExtras>owner_name,icon_server,original_format</flickrExtras>
    </options>

</slideshow>
        

This example will load pictures from Flickr.com via their public api.

Cross Domain Scripting Note: as you might know, JavaScript is restricted to access data from the domain it comes from, i.e. you cannot load XML sources directly from Flickr.com website.
To workaround this security feature, I have created a small proxy script in php ("flickr.com.php") which acts as a data reflector.
You can see the sources here:

            <?php
            //
            // A very simple example that gets a HTTP page.
            //
            
            $ch = curl_init();
            
            curl_setopt ($ch, CURLOPT_URL, "http://www.flickr.com/services/rest/?" . $_SERVER[QUERY_STRING]);
            curl_setopt ($ch, CURLOPT_HEADER, 0);
            
            curl_exec ($ch);
            
            curl_close ($ch);
            
            
            ?>