Klixo Slideshow

If you wish to implement slideshows on your Klixo website, we have developed a javascript class specifically for this. It is simple to use and works cross-browser.

Add an image to your page providing an ID and an MSIE filter, for example, style="filter: progid:DXImageTransform.Microsoft.Fade(duration=1)". Next add a hidden input for each image in the slideshow.  These must all have the same name and the value specifies the name of the image file.  Finally, at the appropriate point (usually in body onload) create the slideshow object:

new kxSlideshow(element_id, image_src, image_path, interval, repeat);

The parameters are:

  • element_id - the ID of the image
  • image_src - the name of the hidden inputs
  • image_path - the path to the images
  • interval - the time in milliseconds between image transitions. This is either fixed for all images or may be an array specifying transition times for each image.
  • repeat - if the slideshow should stop upon showing the last image, set this field to 'nocycle'

Note that the image corresponding to the element_id is not redrawn in a repeating slideshow, it is only drawn initially and the image_src images cycle.  Therefore, to include the element_id image in the slideshow add the filename as another hidden input with the image_src name.  Furthermore, if the interval is an array, this must specify the interval for the image_src and each of the image_path images.

The following HTML and javascript code show image1.jpg, image2.jpg and image3.jpg that cycle for 2, 3 and 4 seconds respectively:

HTML code:

<img src="image1.jpg" alt="image1" id="oSlideshowImage" />
<input type="hidden" name="slideshowImageSrc" value="image2.jpg"/>
<input type="hidden" name="slideshowImageSrc" value="image3.jpg"/>
<input type="hidden" name="slideshowImageSrc" value="image1.jpg"/>

Javascript:

new kxSlideshow("oSlideshowImage", "slideshowImageSrc", Array(2000, 3000, 4000, 2000), 0);

Finally, includes the necessary library files:

  • klixo.js
  • browser.js
  • x-platform.js
  • kxSlideshow.js

That's it. You can add as many slideshows as you like to any one page, simply create a new Klixo slideshow object for each one.

Support Category: 

Help IconNeed help? Have questions?

We're always happy to help, so please feel free to contact Klixo Support on 07 3072660 or email us.