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.
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
A raiz de saber lo de la seleccif3n espaf1ola de batceonslo, utilizo vuestra cancif3n Todos los dedas sale el sol con mi equipo de Alevines de Ffatbol, antes y despue9s de los partidos en el vestuario no ganamos un partido pero los nanos se lo pasan bomba, seguro que los resultados llegaran tarde o temprano con ee9ste buen rollo muchas gracias por e9sta gran cancif3n!!!!
[...] 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
Hi,
I can’t work out why this won’t work for me…
For some reason, there’s no big image and I can’t click on the thumbs.
Is there a reason for this?
1. U need to creat a javascipt with the name ” jquery-1.4.1.js ” with this code from here http://www.nitinh.com/static/jquery-1.4.1.js
2. Put jquery-1.4.1.js into the forder ( the forder have main.css )
3. Edit code in Jquery.html in line 8. ( from src=”../jquery-1.4.1.js to src=”jquery-1.4.1.js” ).
Sorry, because my English so bad. I am from VietNam :”>
The demo file also doesn’t seem to work in IE or Firefox.. Is there something I’m missing?
I am also having a problem getting this to work. I downloaded it and set it all up but the large image is missing and the thumbnails are not clickable. I have looked at the source code and the only thing that seems “off” is that the HTML references jquery-1.4.1.js that doesn’t appear to exist anywhere in the download.
Has anyone figured this problem out yet? There seem to be a lot of people reporting the issue but no one resolving it.
Jeff you can download jQuery from http://www.nitinh.com/static/jquery-1.4.1.js or directly from jQuery site.
I haven’t included jQuery and large images in download just to keep download size small. If you want then you can get them from source of demos http://www.nitinh.com/static/SlideShow/jquery.html.
Great tutorial! Love it. However, is it simple to put in a code to pause it? Place a pause & Play text link?
it shouldn’t be too hard, all you’ll have to do is:
1. clearTimeout(myTimer) on click pause
2. setTimeout(“showNext()”, 100) on click play.
i had problems with the code, so i did a
little modifications to the jquery section.
/***** The code Here ****/
$(function(){
var currentImage;
var currentIndex = -1;
var interval;
var myTimer;
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 = setInterval( function(){ 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);
}
myTimer = setInterval( function(){ showNext(); }, 3000 );
showNext(); //Load first image
$('#thumbs li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count)-1);
});
});
Great tutorial! Just wonder how can you show some text when mouse on the big photo also how can you include <a> for each big photo so that when one photo being clicked, it will lead to the corresponding page?
Many thanks!
to get this thing done you’ll have to put some extra effort in replacing big images with divs which contains necessary text.
Hi,
Thanks for this tutorial. I’m a newbie and have just completed my first website. I used this slideshow effect and had success with chrome, firefox and IE. However, with Safari 5.0.6, the big picture does not show up and the thumbnails are not clickable. How can I fix this?
Thanks!
I haven’t tested this on old version of safari, and I am sorry you’ll have to dig into it yourself. However, if possible please let me also know the solution.
Thanks! How can you stop the transitions and just leave it as a normal gallery which the big photo will only change when clicking the thumbnail?
Many thanks!
That should be simple, you’ll have to remove, setTimeOut and timer functions from the code.
Hi, great tutorial! I’m using several images of different widths, so I want to get it to center. I have this
$(indexImage).css({‘display’:'block’, ‘margin’:'auto’});
but it’s not working for me. Could you help me with this? Thanks
hi,
i think should be something like this..
margin: 0px auto;
good luck..
Hi Nitin,
Can i add left and right navigation arrow in slide show ?
Great Work Man… Awesome !!
many thanks
I not see file “mootools-core.js”
I want mootools-core.js very much
(please give for me)
It doesn’t work properly in IE. 1st it was to the left, i centered it.
The last thumb image goes down to the next line. Fiddled with the css for sometime now. No changes.
Anyway out?
Thanks
thanks a lot
)
Can u give me code for mootools-core.js plz. Thanks.
thank you, I’m looking for articles like this
Hello, is possible the thumbs show a new div, instead the new image?
Like, change My content for My another content
Couse I wanna use richtext instead the images.
Thanls
[...] Download : Simple Slideshow using jQuery [...]
[...] Simple Slideshow using Mootools / JQuery [...]
thx man its works and beutifulllllllll
Hey this is awesome, but i am trying to use this in more that one location on a page. So I am looking to have 10 slideshows total running on one page.(actually inside the anythingslider) is it possible to make this happen?
[...] HÆ°á»›ng dẫn – Demo – Tải vá» [...]
co the giai thich code cua phan Javascript Magic jquery moi lenh co nghia gi khong? bai nay toi lam chay duoc roi ma khong hieu code Javascript Magic jquery.
[...] 1. How to Create a Simple Slideshow using Mootools / JQuery [...]
Hi Nitin,
I’m using your script for a website I’m currently working on, but the fade doesn’t work the first time the images are shown. When all the images are shown once, the fade does work.
Any idea how this is possible?
Best regards,
Anton
Help me here, please!
Got this error in firebug ‘$ is not defined’
im using the last version of JQuery
big pics dont work, same for thumbs
thanks
sorry nitin. i found the error
thanks for this great tutorial , very pleasure and simple as you said
hi this is not working ,i want a silder of this type but bottom images not fade,my requirement is when a image is active in slider then that particular image in bottom highlight with a color and become larger
[...] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想è¦åœ¨æœ‰é™çš„å±å¹•ç©ºé—´å±•ç¤ºå¾ˆå¤šå†…容，这è¦ä½¿ç”¨åˆ°å¹»ç¯ç‰‡ã€‚å¹»ç¯ç‰‡æ˜¯æœ€ä½³çš„å¯ä»¥å±•çŽ°å¤§é‡çš„ä¿¡æ¯çš„æ–¹å¼ã€‚åœ¨è¿™ç¯‡æ–‡ç« ä¸æˆ‘将展示使用MooTools / Jqueryåšå‡ºç®€å•çš„å¹»ç¯ç‰‡çš„过程。 [...]
[...] Slider Details Slider Demo Download Script [...]
[...] you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery. Slider Details Slider Demo Download [...]
Is there no way of just using a single image? and scaling it down or using $(‘img’).clone().appendTo(”);???
Hi Nitin
I came across your tutorial yesterday and it is exactly what i have been looking for. I have added javascript, and when I downloaded the tutorial it has the larger images, I just can’t get them to load on the page when I click the thumbnails. I am very new to website design, I am sure it is something basic I am not doing. Could you help please?
Thanks
Hi Nitin
I came across your tutorial yesterday and it is exactly what i have been looking for. I have added jquery, and when I downloaded the tutorial it has the larger images, I just can’t get them to load on the page when I click the thumbnails. I am very new to website design, I am sure it is something basic I am not doing. Could you help please?
Thanks
thanks
(Y)
This is a great work. Can you please help me to add previous and next functionality for thumbnails?
[...] Détails | Démo | Télécharger [...]
When i test the script, a error appear with Firebug :
ReferenceError: showNext is not defined
myTimer = setTimeout(“showNext()”, 3000);
Have u ever been this error?