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
[...] that is both easy to implement and a snap to customize.Advanced jQuery background image slideshowSimple Slideshow using Mootools / JQueryA Beautiful Apple-style Slideshow Gallery With CSS & jQuery Tags: gallery, jquery, jQuery [...]
i do it but it does not run
[...] Gallery jquery Hướng dẫn: Simple Slideshow : Using Jquery Demo: How to Create a Simple Slideshow using Mootools / JQuery Tải về: http://www.nitinh.com/static/SlideSh…how-JQuery.zip Hướng dẫn: [...]
This looks nice. But what about browser compatibility?
[...] 1. How to Create a Simple Slideshow using Mootools / JQuery [...]
Nice Job!!! Nitin
[...] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容，这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 查看演示 [...]
[...] 1. How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容，这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 [...]
[...] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容，这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 查看演示 [...]
hi. I am a little new to this.
Can you tell me what I would use for script references in the header?
Thanks
[...] 1. How to Create a Simple Slideshow using Mootools / JQuery [...]
[...] 9. Simple Slideshow using Mootools / JQuery [...]
Thank you for the consistent quality in content and sharing one of your favorite post.
[...] you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery. Slider Details Slider Demo Download [...]
Can this be run in 2 instances on the one page?
It’s a great slideshow but I would like to have it running 2 slideshows on the one page, both with their own image libraries. Possible?
This can be done, but you need to make some changes in the script.
Hi nitin,
Can you let me know what changes you need to make to the script to have more than one galley on a page please?
Thanks
Sanjay
If you need a prev function
function showPrev(){
var len = $(‘#bigPic img’).length;
var next = currentIndex > 0 ? currentIndex – 1 : 0; showImage(next);
}
You almost got me going nuts, mr. Riera. You used a different hash line. Fix it:
function showPrev(){
var len = $(‘#bigPic img’).length;
var next = currentIndex > 0 ? currentIndex – 1 : 0;
showImage(next);
}
Tested it and works.
Tested and works. Thanks!
Make sure that when you copy and paste you don’t just leave it as one long line of javascript. There’s a comment in there, so it comments out the rest of the code if it’s all on one line.
I cant get mine to work – The larger images are not displaying (the thumbnails are though) and the functions are not running. I am using it in Dreamweaver …could this be the problem.
very nice article it is very useful.
I used ur code bt my script is not working.
i copied div and ul tag in the body.
css attribute in style tag.
and javascript code in the script tag
am i write?
if i did wrong?please give me suggestion on my email id
why it doesn’t work on me??
help please, .
Hey thanks for this great script! Is there a simple way to pause the slideshow…I’m a newbie so I wouldn’t know how to write a stopstart type of function. Thanks for you help! Again great work.
Looks like this maybe isn’t working in IE? It seems to be working fine in Firefox and Chrome, but not in IE7 or IE8. Anyone been able to get it working?
Yea I figure it out! Ok your Demo obviously works in IE so I checked that source code against what you provide in the slideshow_jquery.zip file and the only difference is that the source code for the working example is written whereas in the .zip you’ve got change it to and it works!
Oops that comment didn’t work because it stripped out the syntax… Change –> script type=”application/javascript” TO script type=”text/javascript” (in slideshow_jquery.zip) and it will work!
Hi,
Does anyone know how to implement more than one gallery on a page please?
Many Thanks
Sanjay
Hello again!
I understand I need to make changes to the script to have more than one gallery on a page, i would really be grateful if someone could let me know what changes I need to make to the script please.
Many thanks
Sanjay
[...] 1. How to Create a Simple Slideshow using Mootools / JQuery [...]
Where in your code are you using JQuery ?
Image show and Image display are being manipulated, that is all that is being done !
I think u haven’t checked the code. There are very few lines, where jQuery functionalities are not being used.
Anyways, I’d love to see your version of code, with deeper use of jQuery.
You’re right, I didn’t go through the code properly.
I’m sorry Nitin.
I see that I can drop the opacity on the large images, but I’d like to drop opacity on the strip of thumbnail images. What’s the best way to do that?
Hey awesome code im wondering how you can stop the jquery from auto cycling through the images, i can make it so each slide takes 999999 time to transfer to the next page but the first slide always changes no matter what :s
Cheers!
Thank you for the consistent quality.
Hi,
I havent tried this out yet. I’m sure I can get it to work and tweak it to the way I need for the website I’m working on.
My only question is, how can I add a play/pause button to this slideshow?
If you use this code for the latter section:
var myTimer;
function startShow(){
myTimer = setTimeout(“showNext()”, 3500);
}
function stopShow(){
clearTimeout(myTimer);
}
$(document).ready(function() {
startShow();
showNext(); //loads first image
$(‘#thumbs li’).bind(‘click’,function(e){
var count = $(this).attr(‘rel’);
showImage(parseInt(count)-1);
});
//you’re going to want to hide this element initially, until the user pauses the slide show, vice versa.
$(‘.start’).bind(‘click’,function(){
startShow();
});
$(‘.stop’).bind(‘click’,function(){
stopShow();
});
});
and then add buttons with the classes .start & .stop
For Adding Play / Pause Button you’ll have to clearTimeout on pause button and again setTimeout on play button click
I love the slide show, but I only want the thumbnail controls and I don’t want it to auto play. Any idea of how I should adjust the javascript? May be a good boolean option for the future.
Great code! One question, how would I adjust the script to make the slideshow pause when a thumb li is clicked?
You’ll have to clearTimeOut(myTimer) on onClick for li and again setTimeout when needed.
–
Nitin, you are fantastic. Thank you so much.
–
[...] 4. How to Create a Simple Slideshow using Mootools / JQuery [...]
This is very nice – thank you. Is the any way to set it so it does not autoplay?
Thank you!
you’ll just have to comment the line which calls showNext function periodically.
for mootools
// myTimer = showNext.delay(3000);
for jQuery
// myTimer = setTimeout(“showNext()”, 3000);
Hi Nitin,
Its a very nice and simple rotating banner which I was looking for. when I downloaded the script on my PC and tried to run, jquery was not working. Is this the problem from my side or the jquery file was missing? Let me know about it.
Thanks.
[...] How to Create a Simple Slideshow using Mootools / jQuery [...]
[...] 1. How to Create a Simple Slideshow using Mootools / JQuery [...]
[...] Slider Details Slider Demo Download Script [...]
hi! thanks for this great slideshow, i have a problem!
y cant see the bigpics when i open the webpage, and i don’t know why!! here is an example!
http://www.eventosvillaadelina.com.ar/demo/fotos/decorado.html
meaby is de jquery, or something about the conexion between the files! please help!!
thanks!
and sorry about my english! im from Argentina
Looks like the URL isn’t working anymore. Hope you yourself have solved the problem.
[...] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容，这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 [...]
[...] Hướng dẫn - Demo - Tải về [...]
[...] 2.How to Create a Simple Slideshow using Mootools / JQuery [...]
hey how can I’m make it so when I click on it it stops the slide, please post the full code. I’m using it for videos so i would be best to stop when I click play on my video. thx
[...] 4. How to Create a Simple Slideshow using Mootools / JQuery [...]
Very nice article and I see that it works well, but my question is.. how would I implement this inside a wordpress page? without access to the head, how would I do this.. having some major issues here lol
Hi
first of all, nice script
i’m trying to click the thumbs and nothing happens (it doesn’t show the image i clicked on), also it doesn’t show pointer when i’m on the thumbs
thank you,
roy