When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i'll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.
You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.
As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words. So lets hit the demo and try it ourselves.
So, Interested ??? Lets head over to its implementation.
Action Plan
- Step 1 : HTML Code Markup
- Step 2 : Setup CSS for the Slideshow
- Step 3 : Javascript for getting desired effect
Step 1 : HTML code
In this step we’ll make basic markup for the slideshow. This basically consists two parts, one which shows the bigger picture and second to show list of thumbnails. Here is the necessary HTML code for these two parts.
<div id="bigPic"> <img alt="" src="imgs/1.jpg" /> <img alt="" src="imgs/2.jpg" /> <img alt="" src="imgs/3.jpg" /> <img alt="" src="imgs/4.jpg" /> <img alt="" src="imgs/5.jpg" /> <img alt="" src="imgs/6.jpg" /> <img alt="" src="imgs/7.jpg" /> <img alt="" src="imgs/8.jpg" /> <img alt="" src="imgs/9.jpg" /> <img alt="" src="imgs/10.jpg" /> </div> <ul id="thumbs"> <li class="active" rel="1"><img alt="" src="imgs/1_thumb.jpg" /> </li> <li rel="2"><img alt="" src="imgs/3_thumb.jpg" /> </li> <li rel="3"><img alt="" src="imgs/4_thumb.jpg" /> </li> <li rel="4"><img alt="" src="imgs/5_thumb.jpg" /> </li> <li rel="5"><img alt="" src="imgs/6_thumb.jpg" /> </li> <li rel="6"><img alt="" src="imgs/7_thumb.jpg" /> </li> <li rel="7"><img alt="" src="imgs/8_thumb.jpg" /> </li> <li rel="8"><img alt="" src="imgs/9_thumb.jpg" /> </li> <li rel="9"><img alt="" src="imgs/10_thumb.jpg" /> </li> <li rel="10"><img alt="" src="imgs/2_thumb.jpg" /> </li> </ul>
Here fist div#bigPic contains all the big images in the slideshow. Whereas, the ul#thumbs contains thumbnails images.
Step 2 : Necessary CSS Code
This section shows, the necessary CSS code. CSS style used in demo for other styles are not included here.
#bigPic{ width:940px; height:300px; padding:1px; border:1px solid #CCC; background-color:#FFF; margin-bottom:10px; } #bigPic img{ position:absolute; display:none; } ul#thumbs li.active{ border:2px solid #000; background:#fff; padding:2px; } ul#thumbs, ul#thumbs li{ margin:0; padding:0; list-style:none; } ul#thumbs li{ float:left; margin-right:7px; margin-bottom:5px; border:1px solid #CCC; padding:3px; cursor:pointer; } ul#thumbs img{ float:left; width:80px; height:80px; line-height:80px; overflow:hidden; position:relative; z-index:1; }
Step 3 : Javascript Magic
The basic idea to get the effect is in following steps:
- Increase the z-index of current shown image
- Show next image to be shown just below current image.
- Now using fade out current image. This way next image will become visible.
Equivalent JS code used is as follows.
Using Mootools
If you use JQuery directly head on to next section with JQuery code.
var currentImage; var currentIndex = -1; var interval; function showImage(index){ if(index<$('bigPic').getElements('img').length){ var indexImage = $$('#bigPic img')[index] if(currentImage){ if(currentImage != indexImage ){ $(currentImage).setStyle('z-index',2); $clear(myTimer); var myFx = new Fx.Tween(currentImage, { duration: 250, onComplete:function(){ $(this).setStyles({'display':'none','z-index':1}); myTimer = showNext.delay(3000); }.bind(currentImage) }).start('opacity',0); } } indexImage.setStyles({'display':'block', 'opacity':1}); currentImage = indexImage; currentIndex = index; $$('#thumbs li').removeClass('active'); $$('#thumbs li')[index].addClass('active'); } } function showNext(){ var len = $('bigPic').getElements('img').length; var next = currentIndex < (len-1) ? currentIndex + 1 : 0; showImage(next); } var myTimer; window.addEvent('domready',function(){ myTimer = showNext.delay(3000); showNext(); //loads first image $('thumbs').getElements('li').addEvent('click',function(e){ var count = this.get('rel'); showImage(parseInt(count)-1); }); });
JQuery Implementation
var currentImage; var currentIndex = -1; var interval; function showImage(index){ if(index < $('#bigPic img').length){ var indexImage = $('#bigPic img')[index] if(currentImage){ if(currentImage != indexImage ){ $(currentImage).css('z-index',2); clearTimeout(myTimer); $(currentImage).fadeOut(250, function() { myTimer = setTimeout("showNext()", 3000); $(this).css({'display':'none','z-index':1}) }); } } $(indexImage).css({'display':'block', 'opacity':1}); currentImage = indexImage; currentIndex = index; $('#thumbs li').removeClass('active'); $($('#thumbs li')[index]).addClass('active'); } } function showNext(){ var len = $('#bigPic img').length; var next = currentIndex < (len-1) ? currentIndex + 1 : 0; showImage(next); } var myTimer; $(document).ready(function() { myTimer = setTimeout("showNext()", 3000); showNext(); //Load first image $('#thumbs li').bind('click',function(e){ var count = $(this).attr('rel'); showImage(parseInt(count)-1); }); });
I have tried to keep the javascript code really simple if you still feel it difficult to understand just drop a comment about it. I'll try to explain your doubts.
Download Code
JQuery Implementation : Sideshow-Jquery.zip
Mootools Implementation : Sideshow-Mootools.zip
Recent Responses