Minimalistic Slideshow Gallery with jQuery

TUTORIALS

July 5, 2010 by Mary Lou 34 Comments 111

232 Like 44

Advertise Here

SEARCH POSTS
In todays tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails. So, lets start!

LATEST POSTS
Sliding Letters with jQuery Rotating Image Slider with jQuery Animated Skills Diagram with Raphal Restaurant Website and Gallery Template Mega Web Buttons Pack #1 Interactive Google Map using the Twitter API Circular Discography Template with jQuery Moving Boxes Content with jQuery 25 Examples of Portrait Usage in Web Design The Importance of Texture in Mobile Design Expanding Image Menu with jQuery Animated Content Menu with jQuery

The Markup
The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs):
01 <div id="msg_slideshow" class="msg_slideshow"> 02 <div id="msg_wrapper" class="msg_wrapper"></div> 03 <div id="msg_controls" class="msg_controls"> 04 <a href="#" id="msg_grid" class="msg_grid"></a> 05 <a href="#" id="msg_prev" class="msg_prev"></a> 06 <a href="#" id="msg_pause_play" class="msg_pause"></a> 07 <a href="#" id="msg_next" class="msg_next"></a> 08 </div> 09 <div id="msg_thumbs" class="msg_thumbs"> 10 <div class="msg_thumb_wrapper"> 11 <a href="#"> 12 <img src="images/thumbs/1.jpg" alt="images/1.jpg"/> 13 </a> 14 <a href="#"> 15 <img src="images/thumbs/2.jpg" alt="images/2.jpg"/> 16 </a> 17 <a href="#">

POPULAR POSTS
converted by Web2PDFConvert.com

18 <img src="images/thumbs/3.jpg" alt="images/3.jpg"/> 19 </a> 20 <a href="#"> 21 <img src="images/thumbs/4.jpg" alt="images/4.jpg"/> 22 </a> 23 <a href="#"> 24 <img src="images/thumbs/5.jpg" alt="images/5.jpg"/> 25 </a> 26 <a href="#"> 27 <img src="images/thumbs/6.jpg" alt="images/6.jpg"/> 28 </a> 29 </div> 30 <div class="msg_thumb_wrapper" style="display:none;"> 31 <a href="#"> 32 <img src="images/thumbs/1.jpg" alt="images/7.jpg"/> 33 </a> 34 <a href="#"> 35 <img src="images/thumbs/2.jpg" alt="images/8.jpg"/> 36 </a> 37 <a href="#"> 38 <img src="images/thumbs/3.jpg" alt="images/9.jpg"/> 39 </a> 40 <a href="#"> 41 <img src="images/thumbs/4.jpg" alt="images/10.jpg"/> 42 </a> 43 <a href="#"> 44 <img src="images/thumbs/5.jpg" alt="images/11.jpg"/> 45 </a> 46 <a href="#"> 47 <img src="images/thumbs/6.jpg" alt="images/12.jpg"/> 48 </a> 49 </div> 50 <a href="#" id="msg_thumb_next" class="msg_thumb_next"></a> 51 <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a> 52 <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a> 53 <span class="msg_loading"></span> 54 </div> 55 </div>

POPULAR POSTS
Beautiful Slide Out Navigation: A CSS and jQuery Fixed Fade Out Menu: A CSS Tutorial and jQuery Tutorial Beautiful Slide Out Navigation Revised Beautiful Background Image Navigation with jQuery Twitter API and jQuery Showcase: Display your CSS and jQuery Tutorial: Followers or Friends Fancy Apple-Style Icon Slide Sliding Panel Photo Wall Out Navigation Gallery with jQuery A Fresh Bottom Slide Out Menu with jQuery jPaginate: A Fancy jQuery Pagination Plugin Day and Night: Creating a Scenery Animation with Creating a Rotating Billboard jQuery and CSS System with jQuery and CSS Awesome Bubble Navigation with jQuery

The alt attribute of the thumbnails will contain the path the full view image. The class names are getting the prefix msg so that the style does not interfere with anything else in your web site. So, lets take a look at the style.

The CSS
First, we will define the style for the main wrapper:
01 .msg_slideshow{ 02 width:400px; 03 height:400px; 04 padding:10px; 05 position:relative; 06 overflow:hidden; 07 background:#101010 url(../icons/loading.gif) no-repeat center center; 08 -moz-border-radius:10px; 09 -webkit-border-radius:10px; 10 border-radius:10px; 11 }

By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. When the next image gets loaded it will simply hide the loader. We will remove borders and outlines from the link elements:
1 2 3 4 5 6 .msg_slideshow a{ outline:none; } .msg_slideshow a img{ border:none; }

In order to center the full image in the container, both, vertically and horizontally, we need to add another wrapper around. That wrapper will be displayed as a table cell. Adding the
converted by Web2PDFConvert.com

vertical-align:middle property will center the image.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 .msg_wrapper{ width:400px; height:400px; position:relative; margin:0; padding:0; display:table-cell; text-align:center; vertical-align:middle; overflow:hidden; } .msg_wrapper img{ display: inline-block!important; vertical-align:middle; -moz-box-shadow:0px 0px 10px #000; -webkit-box-shadow:0px 0px 10px #000; box-shadow:0px 0px 10px #000; }

The display property in the image style will make sure that our image does not become display:block because of the fadeIn we will use in our jQuery function. Since we want to keep our image centered horizontally, we need to keep is as an inline (-block) element. The control element will have the following style:
01 .msg_controls{ 02 position:absolute; 03 bottom:15px; 04 right:-110px; 05 width:104px; 06 height:26px; 07 z-index: 20; 08 -moz-border-radius:5px; 09 -webkit-border-radius:5px; 10 border-radius:5px; 11 background-color:#000; 12 opacity:0.8; 13 }

The common style for all the control elements will be as follows:
01 02 03 04 05 06 07 08 09 10 11 12 13 .msg_controls a{ float:left;

background-color:#000; width:20px; height:20px; margin:3px 3px; opacity:0.5; background-repeat:no-repeat; background-position: center center;
} .msg_controls a:hover{ opacity:1.0; }

The style for each icon:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 .msg_controls a.msg_grid{ background-image:url(../icons/grid.png); } .msg_controls a.msg_prev{ background-image:url(../icons/prev.png); } .msg_controls a.msg_next{ background-image:url(../icons/next.png); } .msg_controls a.msg_pause{ background-image:url(../icons/pause.png); } .msg_controls a.msg_play{ background-image:url(../icons/play.png); }

The thumbs container will slide in from the top, so we will position it absolutely and hide it initially by setting the top to -230px:

converted by Web2PDFConvert.com

01 .msg_thumbs{ 02 background:#000; 03 position:absolute; 04 width:250px; 05 height:166px; 06 top:-230px; 07 left:50%; 08 padding:30px; 09 margin:0 0 0 -155px; 10 -moz-border-radius:0px 0px 10px 10px; 11 -webkit-border-bottom-left-radius:10px; 12 -webkit-border-bottom-right-radius:10px; 13 border-bottom-left-radius:10px; 14 border-bottom-right-radius:10px; 15 -moz-box-shadow:1px 1px 5px #000; 16 -webkit-box-shadow:1px 1px 5px #000; 17 box-shadow:1px 1px 5px #000; 18 opacity:0.9; 19 overflow:hidden; 20 }

With a left of 50% and a left margin of minus half of its width, we can center the absolute element horizontally. The wrapper containing the thumbnails will have the following style:
1 .msg_thumb_wrapper{ 2 position:absolute; 3 width:250px; 4 height:166px; 5 top:30px; 6 left:30px; 7 z-index:30; 8 }

The style of the thumbnails will be as follows:

1 .msg_thumb_wrapper a{ 2 display:block; 3 width:75px; 4 height:75px; 5 float:left; 6 margin:4px; 7 opacity:0.8; 8 }

When we hover the thumbnail we will set the opacity to 1.0, but that we will animate in our jQuery function for a nice effect. The style for the navigation controls:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 .msg_thumbs a.msg_thumb_next, .msg_thumbs a.msg_thumb_prev{ width:18px; height:20px; background-repeat:no-repeat; background-position: center center; position:absolute; top:50%; margin-top:-10px; opacity:0.5; } .msg_thumbs a.msg_thumb_next:hover, .msg_thumbs a.msg_thumb_prev:hover{ opacity:1.0; } .msg_thumbs a.msg_thumb_next{ background-image:url(../icons/next_thumb.png); right:5px; } .msg_thumbs a.msg_thumb_prev{ background-image:url(../icons/prev_thumb.png); left:5px; }

The little element for sliding back the grid view:

01 .msg_thumbs a.msg_thumb_close{

converted by Web2PDFConvert.com

02 03 04 05 06 07 08 09 10 11 12 13 14 15 }

position:absolute; bottom:0px; width:50px; left:50%; margin:0 0 0 -25px; background:#202020 url(../icons/up.png) no-repeat center center; height:16px; opacity:0.7;
-moz-border-radius:5px 5px 0 0; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px;

We are adding some border radius to the top right and top left corners. When we hover, we will make it opaque:
1 .msg_thumbs a.msg_thumb_close:hover{ 2 opacity:1.0; 3 }

And finally, the loading element for the grid view which we center horizontally and vertically with our 50% method:
01 .msg_loading{ 02 position:absolute; 03 background:transparent url(../icons/loading.gif) no-repeat center center; 04 top:50%; 05 left:50%; 06 width:50px; 07 height:50px; 08 margin:-25px 0 0 -25px; 09 z-index:25; 10 display:none; 11 }

And thats all the style. Now, lets add some magic!

The JavaScript
First, we will define some variables: interval: time between the display of images playtime: the timeout for the setInterval function current: number to control the current image current_thumb: the index of the current thumb wrapper nmb_thumb_wrappers: total number of thumb wrappers nmb_images_wrapper: the number of images inside of each wrapper
1 2 3 4 5 6

var var var var var var

interval playtime; current current_thumb nmb_thumb_wrappers nmb_images_wrapper

= 4000; = = = = 0; 0; $('#msg_thumbs .msg_thumb_wrapper').length; 6;

We start the slideshow:

1 play();

When we hover over the main container, we will make the controls slide in from the right:
1 slideshowMouseEvent(); 2 function slideshowMouseEvent(){ 3 $('#msg_slideshow').unbind('mouseenter') 4 .bind('mouseenter',showControls) 5 .andSelf() 6 .unbind('mouseleave') 7 .bind('mouseleave',hideControls); 8 }

When we click on the grid icon in the controls we will show the thumbnails view, pause the slideshow, and hides the control:
1 $('#msg_grid').bind('click',function(e){ 2 hideControls();
converted by Web2PDFConvert.com

2 3 4 5 6 7 });

hideControls(); $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave'); pause(); $('#msg_thumbs').stop().animate({'top':'0px'},500); e.preventDefault();

Clicking on the icon to hide the thumbnails view will again show the controls:
1 $('#msg_thumb_close').bind('click',function(e){ 2 showControls(); 3 slideshowMouseEvent(); 4 $('#msg_thumbs').stop().animate({'top':'-230px'},500); 5 e.preventDefault(); 6 });

Next, we define what happens when we click pause or play. Besides changing the class, we will call the pause() or play() function:
1 $('#msg_pause_play').bind('click',function(e){ 2 var $this = $(this); 3 if($this.hasClass('msg_play')) 4 play(); 5 else 6 pause(); 7 e.preventDefault(); 8 });

Clicking on next or previous control will pause our slideshow and show the respective image:
01 02 03 04 05 06 07 08 09 10 $('#msg_next').bind('click',function(e){ pause(); next(); e.preventDefault(); }); $('#msg_prev').bind('click',function(e){ pause(); prev(); e.preventDefault(); });

Next, we define the functions for showing and hiding the controls. By setting the right value, we will make it slide. Remember, that we set an initial negative value in the CSS.
1 2 3 4 5 6

function showControls(){
$('#msg_controls').stop().animate({'right':'15px'},500); }

function hideControls(){
$('#msg_controls').stop().animate({'right':'-110px'},500); }

The play() function which makes the slideshow go:

1 function play(){ 2 next(); 3 $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play'); 4 playtime = setInterval(next,interval) 5 }

The function for pausing the slideshow. We change again the class and clear the timeout:
1 function pause(){ 2 $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause'); 3 clearTimeout(playtime); 4 }

The next two function will show the next or previous image:
1 2 3 4 5 6 7 8

function next(){
++current; showImage('r'); }

function prev(){
--current; showImage('l'); }

The next function is for showing the image. We also call alternateThumbs(), which will always change the grid to display the view where the current image is located.
01 function showImage(dir){

converted by Web2PDFConvert.com

02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

/** * the thumbs wrapper being shown, is always * the one containing the current image */ alternateThumbs(); /** * the thumb that will be displayed in full mode */ var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nthchild('+current_thumb+')') .find('a:nth-child('+ parseInt(current nmb_images_wrapper*(current_thumb -1)) +')') .find('img'); if($thumb.length){ var source = $thumb.attr('alt'); var $currentImage = $('#msg_wrapper').find('img'); if($currentImage.length){ $currentImage.fadeOut(function(){ $(this).remove(); $('<img />').load(function(){ var $image = $(this); resize($image); $image.hide(); $('#msg_wrapper').empty().append($image.fadeIn()); }).attr('src',source); }); } else{ $('<img />').load(function(){ var $image = $(this); resize($image); $image.hide(); $('#msg_wrapper').empty().append($image.fadeIn()); }).attr('src',source); } }

else{ //this is actually not necessary since we have a circular slideshow if(dir == 'r') --current; else if(dir == 'l') ++current; alternateThumbs(); return; } }

The thumbs wrapper being shown is always the one containing the current image. So, we define a function that controls this:
01 function alternateThumbs(){ 02 $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') 03 .hide(); 04 current_thumb = Math.ceil(current/nmb_images_wrapper); 05 /** 06 * if we reach the end, start from the beggining 07 */ 08 if(current_thumb > nmb_thumb_wrappers){ 09 current_thumb = 1; 10 current = 1; 11 } 12 /** 13 * if we are at the beggining, go to the end 14 */ 15 else if(current_thumb == 0){ 16 current_thumb = nmb_thumb_wrappers; 17 current = current_thumb*nmb_images_wrapper; 18 } 19 20 $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') 21 .show(); 22 }

Next, we define what happens when we navigate through the thumbs:

converted by Web2PDFConvert.com

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

$('#msg_thumb_next').bind('click',function(e){ next_thumb(); e.preventDefault(); }); $('#msg_thumb_prev').bind('click',function(e){ prev_thumb(); e.preventDefault(); }); function next_thumb(){ var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nthchild('+parseInt(current_thumb+1)+')'); if($next_wrapper.length){ $('#msg_thumbs').find('.msg_thumb_wrapper:nthchild('+current_thumb+')') .fadeOut(function(){ ++current_thumb; $next_wrapper.fadeIn(); }); } } function prev_thumb(){ var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nthchild('+parseInt(current_thumb-1)+')'); if($prev_wrapper.length){ $('#msg_thumbs').find('.msg_thumb_wrapper:nthchild('+current_thumb+')') .fadeOut(function(){ --current_thumb; $prev_wrapper.fadeIn(); }); } }

Clicking on a thumbnail will load the respective image:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){ var $this = $(this); $('#msg_thumb_close').trigger('click'); var idx = $this.index(); var p_idx = $this.parent().index(); current = parseInt(p_idx*nmb_images_wrapper + idx + 1); showImage(); e.preventDefault(); }).bind('mouseenter',function(){ var $this = $(this); $this.stop().animate({'opacity':1}); }).bind('mouseleave',function(){ var $this = $(this); $this.stop().animate({'opacity':0.5}); });

And finally, our resize function that fits the image inside of our container, which we defined to be 400400 pixel:
01 function resize($image){ 02 var theImage = new Image(); 03 theImage.src = $image.attr("src"); 04 var imgwidth = theImage.width; 05 var imgheight = theImage.height; 06 07 var containerwidth = 400; 08 var containerheight = 400; 09 10 if(imgwidth > containerwidth){ 11 var newwidth = containerwidth; 12 var ratio = imgwidth / containerwidth; 13 var newheight = imgheight / ratio; 14 if(newheight > containerheight){ 15 var newnewheight = containerheight; 16 var newratio = newheight/containerheight; 17 var newnewwidth =newwidth/newratio; 18 theImage.width = newnewwidth; 19 theImage.height= newnewheight; 20 } 21 else{ 22 theImage.width = newwidth; 23 theImage.height= newheight;

converted by Web2PDFConvert.com

24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 }

} }

else if(imgheight > containerheight){ var newheight = containerheight; var ratio = imgheight / containerheight; var newwidth = imgwidth / ratio; if(newwidth > containerwidth){ var newnewwidth = containerwidth; var newratio = newwidth/containerwidth; var newnewheight =newheight/newratio;
theImage.height = newnewheight; theImage.width= newnewwidth; }

else{
theImage.width = newwidth; theImage.height= newheight; } } $image.css({ 'width' :theImage.width, 'height':theImage.height });

And thats it! We hope you enjoyed this tutorial and find our little slideshow useful!

Share and Enjoy:

WRITTEN BY MARY LOU Mary Lou is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly grounded peppercorns.

TAGGED WITH: CSS3, GALLERY, IMAGES, JQUERY, MINIMALISTIC, SLIDESHOW

YOU MIGHT ALSO LIKE

Restaurant Website and Gallery Template

Full Page Image Gallery with jQuery

Interactive Photo Desk with jQuery and CSS3

Beautiful Photo Stack Gallery with jQuery and CSS3

Multimedia Gallery for Images, Video and Audio

Flickr Photobar Gallery

converted by Web2PDFConvert.com

DISCUSSION34
ALEX Very cute, you are on a roll!!!

JOIN THE DISCUSSION

JULY 5TH, 2010 AT 20:24

ALPAPRODUCTIONS

JULY 5TH, 2010 AT 21:20

This is very well done but I still prefer to have thumbnails generated automatically and (future improvement) maybe have an option to load images from Flickr or a folder. Well DONE!!

E11WORLD

JULY 5TH, 2010 AT 21:21

The design is actually pretty nice on this. Very well written tutorial!

MARK

JULY 6TH, 2010 AT 02:46

Very nice, any chance of added the ability to add a comment to each pic that slides up as the pic is shown?

JIRECK Great !! Wonderfull slideshow and use of jquery but :

JULY 6TH, 2010 AT 09:25

- Why you dont use UL with LI to display image (I dont know why but i dont like many following link : A HREF=#') ? - I Think Your demo is .too dark Jireck

MARY LOU

JULY 6TH, 2010 AT 10:50

Hi Jireck! You are right, I am link obsessed, someone should slap me! :) I will keep that in mind for the next tuts. In the meantime, here is version with list elements and in light color: DEMO ZIP What do you say? Cheers, ML

LEVI

JULY 6TH, 2010 AT 18:21

simplesmente maravilhoso ( simplely wonderful) !

converted by Web2PDFConvert.com

MICHAEL PEHL Awesome work, downloaded ;-)

JULY 6TH, 2010 AT 20:42

BEBEN wow Mary Lou make different versi but its cool its cool and thats cool = all cool WOW!!!

JULY 7TH, 2010 AT 04:50

SUEJ

JULY 7TH, 2010 AT 13:30

This gallery is fantastic have shown it to a few here at work they just loved it too :-) Thanks for this tutorial.

MARY LOU

JULY 7TH, 2010 AT 17:00

Beben! Thank you!! :D Many cheers from the team!

MARY LOU

JULY 7TH, 2010 AT 17:02

@SueJ Thank you so much, I am really glad you like it!! Cheers, ML

JIRECK Hi Mary Lou The demo is really Nice . I think its more clean to do with UL LI I will check code (i DL your zip) thanks Jireck PS : Reactivity increase !!! ;-)

JULY 7TH, 2010 AT 17:24

NDREW this is so amazing

JULY 13TH, 2010 AT 10:21

GEOFFREY GORDON

JULY 14TH, 2010 AT 15:46

Loved the gallery just what I am looking for. I need a little help though. If i try to put the gallery twice in one page, the one load perfectly the other, just has the loading sign, any idea why? Since I would like to put 3 on one page.

MONTANA Flash killla

JULY 15TH, 2010 AT 22:39

SESLI SOHBET

JULY 20TH, 2010 AT 13:08

Thank you for sharing admin.demo been nice greetings and best regards

converted by Web2PDFConvert.com

KARBO13

AUGUST 1ST, 2010 AT 23:22

Very good work, professional and beautifull. Thanks for share it.

MEHR how can i do larger size for Slideshow

AUGUST 11TH, 2010 AT 18:58

NISMO

OCTOBER 23RD, 2010 AT 06:16

Thank you very much I am using it and it looks amazing. Code explanation made it easy for me to customize it for my site.

NAGESWAR RAO this website is really fantastic its very Help full to me. Thanks for codrops

DECEMBER 8TH, 2010 AT 10:09

KARINA

JANUARY 3RD, 2011 AT 15:53

Hello! Its really fantastic gallery! But I have the question script works with only 12 images and I cant find how expand this size. There are about 100 images in my folder and Id like to show they all.

MARY LOU

JANUARY 3RD, 2011 AT 19:58

@Karina, you will have to add them to the html file. For every set of 6 images you add a wrapper called msg_thumb_wrapper. Just take a look at the file and you will see the structure. Dont forget to add the path to the bigger image to the alt attribute. Hope it helps, cheers, ML

KRATOS

JANUARY 10TH, 2011 AT 15:01

this is a great gallery but Ive got a problem. when i did the same thing it worked on my computer but when i transfered it online the icons for play, next, didnt play. Why?

KRATOS look http://lichalopez.free.fr/

JANUARY 10TH, 2011 AT 15:12

LUDO

MARCH 1ST, 2011 AT 18:55

Hi Mary Lou, i love your minimalism but i was wondering if it coul be possible to have a button to enlarge the images. Ill explain myself : in your example the images in the slideshow are 400px width but could it be larger ones, 800px for example, resized by the javascript (i guess its already done). The point is, how to implement it in the js. I think it counter your aim to be minimalist and if its possible you could only give me the trick in the js. Tks. L

LE

MARCH 3RD, 2011 AT 04:54

converted by Web2PDFConvert.com

I like it. Could I use it in a commercial project?

MARY LOU @Le, yes you can! Cheers, ML

MARCH 3RD, 2011 AT 13:37

CHRIS

MARCH 17TH, 2011 AT 23:52

Hey ML, Like a few have mentioned before Id like to emphasize on a few things. #1 Love your work. Quality and quantity. #2 I agree with @Jireck and much appreciate the ul li implementation. #3 @Ludo I also need to enlarge the images one more time. Perhaps with a simple lightbox effect. Using Fancybox requires an anchor tag to be wrapped around the image. Is this possible? Many thanks. Cheers!

SHAUN Hi, Great work.

APRIL 15TH, 2011 AT 18:00

How is it possible to open external pages through the image links. Do I need an onClick event in the HTML? Thanks

ROLLY

APRIL 19TH, 2011 AT 17:01

Thanks for this wonderful slideshow. I actually use it in my website. How about putting caption? I hope you can develop that one.. Great thanks! =)

INGO Hello Mary Lou, (couldnt resist that;-) )

APRIL 26TH, 2011 AT 14:17

great slideshow and very good tutorial. Ive got one question: at the moment the slideshow stops on the last image. Is it possible to put it on endless repeat? Cheers ingo

AHSAN

MAY 1ST, 2011 AT 12:54

Fantastic work! Codrops is generally my first stop when looking for cool jQuery driven things. I second Rollys request for captions in the gallery. Would love to have the it appear as an image overlay.

GAUTAM

MAY 9TH, 2011 AT 12:59

Thanks buddy its awesome. But i have query. How to play this slide show in loop?

FOLLOW THIS DISCUSSION

converted by Web2PDFConvert.com

JOIN THE DISCUSSION

CSS Certification Courses
Tak e CSS Certification Courses at Accredited Schools. Get Info! Technology-Schools.com

jQuery Training Online

Learn to navigate docum ents, create anim ations, and m ore from ex perts. www.lynda.com

NAME * E-MAIL (NOT PUBLIC) * WEBSITE YOUR COMMENT

Submit Comment

MOST DISCUSSED
Beautiful Background Image Navigation with jQuery PHP Login System Reloaded v1.1 Thumbnails Navigation Gallery with jQuery Beautiful Photo Stack Gallery with jQuery and CSS3 Fancy Sliding Form with jQuery Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Smooth Vertical or Horizontal Page Scrolling with jQuery

OUR FAVORITES
WEB RESOURCES DEPOT CREAMY CSS 2EXPERTS DESIGN W3AVENUE DESIZN TECH TUTORIALZINE WEBAPPERS WHAT MAKES THEM CLICK SMASHING MAGAZINE DESIGNERS LIST WEB DESIGN LEDGER

ABOUT US
Codrops is a web development blog that publishes articles and tutorials about web design, programming and usability. The team of Codrops is dedicated to provide useful and qualitative content that is free of charge. If you want to contact or hire us, feel free to use our contact form on our main page tympanus.net

D E S I T Y M B Y U2 C0 O D R O P S U T V E R C O S E A C T G N P A N S 1 1 A B O A D T I N T

converted by Web2PDFConvert.com