To Build a Better Slideshow

Its been a while since I released the original TeePlates slideshow. I have seen it used well in many stores. There have been afew requests for some improvements to be made, including being able to have more than one slideshow on a page as well as some alternative transitions to the default fade. Well, as is often the case, the original really as not designed with these sorts of  things in mind, so it was back to the drawing board.

Thankfully, someone has already created a great slideshow that I was able to tune up for Printfection use. Based on Malsup's Jquery Cycle plugin, the new improved slideshow is here. You can now choose from a wide range of transitions and can have as many slideshows on a page as you would like.

Here are some examples of the transitions available:

 

The implementation is slightly different to the previous model and does require you to choos some options, however I don't think anyone will find it too hard.

Code Block 1

Firstly, add the following HTML to your store's base HTML:


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript">
</script>
<script src="http://www.australele.com/usw/js/jqcycle.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sshow1').cycle({ 
    fx:    'fade', 
    speed:  1500 ,
    timeout:  3000 ,
    pause:  1 
 });
});
</script>

I will explain the various options further down, but first you will need to add the actual images to your base HTML. The following can be placed anywhere within your store that you like:

Code Block 2


<div id="sshow1">
<a href="http://www.printfection.com/Ukulele/Ukulele-Revolution/_s_168624" target="_blank">
<img border="0" src="http://img.printfection.com/2/195/4626834/2BWHS.jpg" alt="" /></a>
<a href="http://www.printfection.com/Ukulele/Star-No-1/_s_150601" target="_blank">
<img border="0" src="http://img.printfection.com/2/424/4130707/MEVH8.jpg" alt="" /></a>
<a href="http://www.printfection.com/Ukulele/Air-Ukulele/_s_168827" target="_blank">
<img border="0" src="http://img.printfection.com/2/2719/4631003/hdYrD.jpg" alt="" /> </a>
</div>

You can use any images you like, shirts, banners, whatever. You should of course have each slide the sam size in pixels.

The final thing that you will want to do is add some CSS to keep everything nice and neat:


#sshow1 {overflow: hidden; height:180px;width:180px;}

The height and width in this CSS should match your image / slide size.

Options

Within the source code above, you will see a number of configuration options, fx, speed, timeout, random, pause. These control the look of your slideshow and can be used in the following ways:

fx: 'option', - This can be any one of the following and will define the type of transition between slides:

  • fade
  • fadeZoom
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • zoom

speed: 1500, - This is the time it takes for one slide to turn into another in milliseconds. The larger the number the slower the transition.

timeout: 3000, - This is the time that each slide is visible before moving to the next in milliseconds.

pause: 1 - If set to 1 the slide show will pause when a user hovers the mouse over the slideshow. Set it to 0 to ignore the hover

Want multiple Slide Shows?

If you wish to have more than one slide show, all you need to do is add another lot of HTML from Code Block 2 above. Rename the ID in the second slideshow to be sshow2 or whatever you like and then add another configuration into code block 1 so that you end up with something like this:


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript">             </script>
<script src="http://www.australele.com/usw/js/jqcycle.js" type="text/javascript">      </script>
<script type="text/javascript"> 
$(document).ready(function(){
$('#sshow1').cycle({ fx: 'fade', speed: 1500 , timeout: 3000 , pause: 1 }); $('#sshow2').cycle({ fx: 'zoom', speed: 1500 , timeout: 3000 , pause: 1 }); }); </script>

You will also need to add some CSS for sshow2, that sets the height and width as well.

17.04.2008. 15:18

Naren on 30.07.2009. 09:27

It,s really nice.