How to Make an Elegant Sliding Image Gallery with jQuery

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

16-Mar-11 00:00
This is a forum topic for discussing the article "How to Make an Elegant Sliding Image Gallery with jQuery":

http://www.elated.com/articles/elegant-sliding-image-gallery-with-jquery/

Learn how to build a nice-looking sliding photo gallery using JavaScript and jQuery. Full code download included.
19-May-11 07:46
This is fabulous! Just what I was looking for! I am creating a site for a photographer friend and she is gonna love this!
19-May-11 23:49
@dlass727: Thanks for your comment - glad you like it!

--
Matt Doyle, Elated
01-Jul-11 20:59
Thanks, this is the answer to my prayers. I was wondering how I can get the slider to slide continuously, and to have the middle slider start on the second image?
04-Jul-11 23:33
@ccubmed:

"how I can get the slider to slide continuously"

Create a timer function using setInterval() that calls moveRight():

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

"have the middle slider start on the second image"

You mean, start the gallery with the second image in the centre instead of the first?

The most reliable way (without hacking a lot of code) is probably to add a delayed call to moveRight() once enough slides have been preloaded:


if ( preloaded == preloadSlides || preloaded == totalSlides ) {
$('#loading').clearQueue().stop().fadeTo('slow', 0 );
$('#gallery').css('top',0);
$('#gallery').fadeTo('slow', 1 );
$('#leftButton').css('height',buttonHeight);
$('#rightButton').css('height',buttonHeight);
$('#rightButton').show();
addSlideHover();
loading = false;
setTimeout( moveRight, 500 );
}


--
Matt Doyle, Elated
11-Jul-11 23:50
This is really good/super. The only thing I dislike (just a litle) is that you have to have the link to elated in the info window. Is there a possibility to use this without it?

[Edited by Andor on 11-Jul-11 23:56]
12-Jul-11 02:50
@Andor: Of course! That info window is only there so people can get back to the tutorial. Feel free to remove it in the markup. The code is CC attribution licensed so you just need to include credit/link to www.elated.com somewhere.

--
Matt Doyle, Elated
12-Jul-11 04:06
Is it ok to have the link in the javascript code? Was going to put it there for my own sake (always good to have a ref. where you got the code).
13-Jul-11 04:37
@Andor: Fine by me!

--
Matt Doyle, Elated
22-Sep-11 08:52
Hi i am working on a project it is on dress models to buy. The image gallery should show front and back side of the dresses. I want to put 2 dots just below the image, if you press one dot it should show front side of the dress image and if you press the other dot it should show back side of the dress image. how can i do that ? can you please help? thank you.
14-Oct-11 08:50
I donĀ“t know how to thank you... This is really great!

One thing i wanna change.. How can i make captions to show always.. In that center picture..

Thanks.
15-Oct-11 18:37
@jkwebdesign: Take out:


display: none;


from the #caption ruleset in the CSS. Then remove these lines:


// Stop any fades on the caption and hide it
$('#caption').stop().clearQueue().hide();


from the moveLeft() and moveRight() functions. Then remove all calls to addSlideHover() from the code.

--
Matt Doyle, Elated
20-Oct-11 05:59
Thanks a lot.. now it is just what i want it to be..:) COOL..

I just figure out that it is also possible to show videos from tube or vimeo with this..
26-Oct-11 01:33
@jkwebdesign: Videos would be awesome! I guess it should work using HTML5 video elements instead of img elements? Let us know if you manage to get it working

--
Matt Doyle, Elated
09-Nov-11 17:31
This is great! I have one issue. I have 9 images and the slider seems to stop at the 5th image and no longer moves. I've looked through the code, but am at a loss. Do I have to change the div margin? Please help.
10-Nov-11 10:34
My bad, I figured it out, miss spelling
11-Nov-11 02:36
@micketong: No problem - glad you got it working

--
Matt Doyle, Elated
15-Nov-11 05:36
I love this but having some problems in latest IE versions. The images load ok but
a) I don't see the arrows (so therefore it's not obvious to a casual user what to do) and the horizontal scroll bar appears.

b) On this link http://www.alanmatthewsphotography.com/music you can see the image where the bald tattooed guy with his hands up had little white dots all over. That's not how it's supposed to be.

All this looks great in Safari!
15-Nov-11 09:02
Your tutorials kick ass. So well written. You should write a book. Thanks for sharing this.
18-Nov-11 00:04
@AlanMatthews: It's because you're using an ancient DOCTYPE that is triggering IE's Quirks mode. Make sure you use the HTML5 DOCTYPE used in the tutorial demo and you should be fine.

--
Matt Doyle, Elated
18-Nov-11 00:04
@waterworks: Thanks

--
Matt Doyle, Elated
22-Nov-11 08:14
@Matt - thanks IE now looks much better. Still have some tweaks but I'm still having trouble with how some images are displaying in IE only. If you have IE, look at http://www.alanmatthewsphotography.com/music/index.shtml and see the 7th picture (the guy with his hands raised and eyes closed) and do you see the tiny white dots everywhere? If you open that image alone in a new tab those dots are not there. So it has to be some implementation of the CSS.
23-Nov-11 20:09
@AlanMatthews: I don't see any white dots in IE7, 8 or 9. It might be an issue with your browser or OS. Can you post a screenshot somewhere?

Great-looking site BTW - really nice use of the gallery script!

--
Matt Doyle, Elated
23-Nov-11 20:09
@AlanMatthews: I don't see any white dots in IE7, 8 or 9. It might be an issue with your browser or OS. Can you post a screenshot somewhere?

Great-looking site BTW - really nice use of the gallery script!

--
Matt Doyle, Elated
24-Nov-11 11:43
Thanks! It really solves some issues I had when using straight HTML and CSS. I had a user not know what to do when the page loaded so I made the initial opacity on the right arrow higher so it was obvious what to do.

Still have issues with some images in the latest IE on Windows 7 at least that's what I have seen and still see.
25-Nov-11 04:32
@AlanMatthews: Can you post a screenshot somewhere? eg Flickr or MediaFire?

--
Matt Doyle, Elated
29-Nov-11 04:50
Is it possible to make thumbs on the bottom. I'm fresh in jquery.. any help for me ?
01-Dec-11 02:24
@iwek: Certainly possible, yes, although it will require a little bit of coding. You can either just scale down the slide images to thumbnails using CSS (easy, but takes up a lot of bandwidth), or produce thumbnail versions of the slides using something like Photoshop (more time-consuming, but saves bandwidth if the user isn't going to view all the slides).

You can create the thumbnails as explicit <img> tags in your markup. Put them in a separate div with a class of, say, "thumbs". Then style the div and the images using CSS (for example, absolutely position the div along the bottom of the window, and scale the images to max-width: 100px and max-height: 100px). You can then link each image using something like:


<a href="#" onclick="moveToSlide(3)"><img ...></a>


...replacing '3' with the index position of each thumbnail.

Then write a simple moveToSlide() JavaScript function that takes the slide index to move to, works out how many positions left or right it needs to move, then calls moveLeft() or moveRight() the appropriate number of times.

Cheers,
Matt

--
Matt Doyle, Elated
01-Dec-11 11:12
Huh.. i made it..

Maby this is not a beautyful code but it works.


function moveToSlide(gotoSlide) {

var num = 0;
skipSlide = gotoSlide-currentSlide;

if(skipSlide>0)
skipUpDown = false;
else
skipUpDown = true;

numberSkip = (Math.abs(skipSlide))-1;

if(skipUpDown)
{
for(num=0;num<=numberSkip;num++)
{
slides[currentSlide].unbind('mouseenter').unbind('mouseleave').unbind('touchstart');
$('#caption').stop().clearQueue().hide();

var offset = 0;
for(num=0;num<=numberSkip;num++)
{
offset += slideWidths[currentSlide]/2 + slideHorizMargin*2 + slideWidths[currentSlide-1]/2;
if(num==numberSkip) $('#gallery').animate( { left: '+=' + offset },400 );
if(num==0) slides[currentSlide].animate( { opacity: backgroundSlideOpacity } );
if(num==numberSkip) slides[currentSlide-1].animate( { opacity: currentSlideOpacity } );
currentSlide--;
}

setButtonStates();
$('#caption').html( slides[currentSlide].attr('alt') );
addSlideHover();
}
}
else
{

slides[currentSlide].unbind('mouseenter').unbind('mouseleave').unbind('touchstart');
$('#caption').stop().clearQueue().hide();

var offset = 0;
for(num=0;num<=numberSkip;num++)
{
offset += slideWidths[currentSlide]/2 + slideHorizMargin*2 + slideWidths[currentSlide+1]/2;
if(num==numberSkip) $('#gallery').animate( { left: '-=' + offset },400 );
if(num==0) slides[currentSlide].animate( { opacity: backgroundSlideOpacity } );
if(num==numberSkip) slides[currentSlide+1].animate( { opacity: currentSlideOpacity } );
currentSlide++;
}

setButtonStates();
$('#caption').html( slides[currentSlide].attr('alt') );
addSlideHover();
}

}


Now.. I opacity thumbs (0.5)
I found something like this..


$(function(){
$("#thumbs a img").fadeTo("fast", 0.5);

$("#thumbs a").bind({
mouseenter:function(){
$('img', this).fadeTo("slow", 1);
},mouseleave: function(){
$('img', this).fadeTo("slow", 0.5);
}
});
});


Also works.. But how to set opacity(1.0) for current Slide thumb?

[Edited by iwek on 02-Dec-11 07:37]
04-Dec-11 03:42
Great work, matt !

Two questions:

1. Is there a way to have the pictures enlarged by clicking on them?

2. Is there any problem with using a database for the storing of pictures and legends (with php and mysql)?
05-Dec-11 23:46
@iwek: You have the currently-displayed slide index in currentSlide, right? So you could find and manipulate the corresponding thumb image using something like:


var image = $("#thumbs a:eq(" + currentSlide + ") img");
image.fadeTo("slow", 1);


Just guessing - should work in theory!

http://api.jquery.com/eq-selector/

Cheers,
Matt

--
Matt Doyle, Elated
06-Dec-11 19:50
@etelka: Thanks

1. Yes, you should be able to add in a lightbox such as http://fancybox.net/ or http://jacklmoore.com/colorbox/ fairly easily. Just call fancybox() or colorbox() on each img. If you need to wrap each img element in a link (not sure if this is a requirement of fancybox/colorbox) then you'll need to hack the image gallery script to work with the images inside links.

2. No problem at all. Just write a PHP script to grab the image URLs and captions for the database, then output the gallery page containing the appropriate img tags.

--
Matt Doyle, Elated
07-Dec-11 04:51
Thank you, matt. I'll give it a try and let you know in a few days if it worked out.
11-Jan-12 09:34
Hi there! I love your slider, but it seems I have a problem when using it in my webpage. I set the webpage's header fixed so it can be shown on my page when I scroll. But the problem is that, when I scroll, the slider wouldn't go underneath the header, but above.
I analyzed the script and the css, but I couldn't find the problem. It's like the slider is set on 'Always on top' or something.
The other divs in my webpage are scrolling just fine, the slider is the only one that is having this problem.
Please help!
Thanks!

--
teodora
11-Jan-12 17:38
@teodora: Without seeing your page it's hard to give you an exact answer. But you might try setting the header's 'z-index' CSS property to a high value, such as 999.

--
Matt Doyle, Elated
11-Jan-12 18:44
This is awesome! Thanks a bunch for making it!

Just finished learning basics of html/php/css.Now I am building my first web app. I have created a php file that sends back a random image from a database of thousands of images. Let's call this php file some_file.php

Current sliding image gallery code uses fixed set of local images for slideshow. Now i want to modify sliding image gallery code such that it pulls images from some_file.php and create a never ending slideshow. Any hints/suggestions/sample code on how to proceed.

Thank you in advance!
12-Jan-12 01:52
@aspire: Please post your question in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

--
Matt Doyle, Elated
12-Jan-12 03:36
yes, it worked with a 'z-index' higher value. I figured this out by myself just before i read your answer.
Thank you very much!

--
teodora
16-Jan-12 01:37
@teodora: Great stuff

--
Matt Doyle, Elated
30-Jan-12 11:35
@Matt
how do I show the captions?


function addSlideHover() {

if ( 'ontouchstart' in document.documentElement ) {
slides[currentSlide].bind( 'touchstart', function() {
if ( $('#caption').is(':visible') ) {
$('#caption').stop().clearQueue().fadeOut( captionSpeed );
} else {
$('#caption').stop().clearQueue().fadeTo( captionSpeed, captionOpacity );
}
} );
} else {
slides[currentSlide].hover(
function() { $('#caption').stop().fadeTo( captionSpeed, captionOpacity ) },
function() { $('#caption').stop().fadeTo( captionSpeed, 0 ) }
);
}
}


[Edited by ugotnukd on 30-Jan-12 12:52]

--
http://www.zeusandhistory.com
02-Feb-12 21:40
If you mean "how can I always show the captions", see my answer earlier in the topic:

http://www.elated.com/forums/topic/5158/#post21591

--
Matt Doyle, Elated
15-Feb-12 16:53
Hi Matt,
is it possible to replace <img> with <div>, so I can display html tags in each slide?

Thanks!
17-Feb-12 02:16
@catseven: I don't see why not. Just replace the img elements in the #gallery div with divs, and change the relevant CSS and jQuery selectors from '#gallery img' to '#gallery div'.

Never tried it but it should work - in theory

--
Matt Doyle, Elated
03-Mar-12 21:06
Hello Matt,

I like it very much this slide. I tried to change the start position og the slide but can make it. I want it to start from the left, do you have any suggestion, please?

--
Do what you can do, improve what others cant
09-Mar-12 16:42
@xJoSyMaRx: To start the gallery on the second slide, set currentSlide to 1 instead of 0:


var currentSlide = 1; // The slide that the user is currently viewing


You'll also need to change:


if ( $(this).data('slideNum') == 0 ) {
centreCurrentSlide();
$(this).fadeTo( 'slow', currentSlideOpacity );
} else {
$(this).fadeTo( 'slow', backgroundSlideOpacity );
}


to:


if ( $(this).data('slideNum') == 1 ) {
centreCurrentSlide();
$(this).fadeTo( 'slow', currentSlideOpacity );
} else {
$(this).fadeTo( 'slow', backgroundSlideOpacity );
}


--
Matt Doyle, Elated
16-Mar-12 13:04
Hi Matt,

First, thanks for creating this slider! It's very cool and exactly what I've been looking to include in my site. I'm having a few small issues that I'm hoping you can help me with.

1) I have the "galleryContainer" div sitting inside my own "wrapper" div, which is centered in the browser. The slider is set so only one image is shown on screen at once but the image isn't centered in the browser. It's showing more towards the right of the screen in Safari. In Firefox, part of the right side of the image is cut off, at the edge of the wrapper div. How can I control the positioning of the image?

2) I also wanted the captions to be always showing but I can't figure out a way to fade them in with each image. Is there a way to fade in the caption with each slide?

3) Finally, is there anyway to put html in the captions? I'd like to put a link in there but since it's pulling from the <alt> tag, I can't...

Thanks again!

[Edited by azukizero on 16-Mar-12 14:41]
23-Mar-12 02:58
@azukizero: If you post the URL of your gallery page then I can take a look. You'll probably need to at least change this line:


var windowCentre = $(window).width() / 2;


so that it uses your div's width instead of $(window).width().

--
Matt Doyle, Elated
23-Mar-12 11:36
Matt, thanks for your reply. I was able to center the gallery images in the browser by taking it out of the "wrapper" div and I fixed the captions to always 'on' by playing around a bit.

I've tried several approaches to changing the caption info from the 'alt' tag to regular <p> info so I can put a link in there but I haven't had any success.

Any ideas on how I can change the source of the caption info from the 'alt' tag to something else so I can do this?

Thanks again for your help!
29-Mar-12 03:13
@azukizero: I guess you could put a <p> after each <img> that contains the caption. Then you could create a slideCaptions array and populate it in the same way as the slides array:


$('#gallery p').each( function() {
$(this).hide();
$(this).data( 'slideNum', totalCaptions );
slideCaptions[totalCaptions++] = $(this);
} );


Then you could set the current caption throughout the code like this:


$('#caption').html( slideCaptions[currentSlide].html() );


Haven't tested it but you get the idea!

--
Matt Doyle, Elated
16-Apr-12 03:55
Great writeup and easy to understand. Thanks a lot!!

I have two questions though.
1) For each image I want on hover to add elements like facebook like, tweet/share etc and comments. How will that be possible?

2) I don't see any button where I can exit from the gallery. My intention is to click from a list of images and get to this gallery and then click close and go back to the list.

Can you please advise?

--
Abhi
04-May-12 05:02
@akdwivedi:

1) To like or share an image it will need its own unique URL. You could maybe do this by hacking the gallery code to accept a hash value in the URL and display the corresponding image when it loads. Or you could let the user click an image to open it in its own unique page, where it could then be liked/shared.

2) Just create a link back to your image list. (Or create a button, and add an onclick that returns the user to the image list.)

--
Matt Doyle, Elated
04-May-12 05:07
@matt thanks for the reply! I will give it a try, not sure if I will achieve it

-Abhi

--
Abhi
21-May-12 02:45
thanks for this it's amazing...
i just have 1 question, how can i make it slide automatically??
22-May-12 05:20
Read the fifth post in the thread.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
28-Dec-12 20:17
Firstly, I love this Slider! Thank you for taking the time and energy to create and share it.

I am brand new to jquery and javascript so pardon if these questions have commonly known answers.

I am currently auto-playing the slideshow using "var timer = setInterval( moveRight, 4500 );" I am not sure if this is the best way to go about it. Is it? If it is, then how can I get the right and left buttons to override the setInterval timing? Currently, even when I press the buttons, it still wants to pull the next slide in from right to left, every 4500 ms, no matter which direction I'm going in, and regardless of when I just pressed the right/left arrow button. I am okay with the auto-play feature being turned off once the user hits the left/right arrows. I just don't know how to do it.

It would also be nice if the user could pause the playback and resume it again with the space-bar. How can I do that?

Also, I would like the slideshow to infinitely loop back to the first image as if there was no break in the loop. I have found a way to rig it but simply listing the images again, but this will only "loop" until the images are done being shown, not infinitely.

Last but not least, how can I set the time it takes to switch out each slide to be 1000 or 1500 ms?

Thank you so much for your help!

[Edited by LittleMama1980 on 28-Dec-12 22:09]
13-Jan-13 21:54
@LittleMama1980: To turn off your auto-play feature, just call clearInterval( timer ) .

See: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

--
Matt Doyle, Elated
16-Apr-13 22:33
i knw how for css we make a different file with .css extension.. but m unaware of jquery ,ajax.. i need help to let me knw wer to put jquery and ajax codes

--
Akash Harendra Wanjari
10-Sep-13 10:51
Hi , i cant use it with reflection on ie8 can anybody help me ?
11-Nov-13 06:09
Hi Mark,

Thanks so much, this is exactly what I was looking for.
Just a quick question, would it possible to make the images fully responsive and perhaps move the scrolling vertically for mobile device?

--
Poppinswhite
01-Feb-14 12:03
Thanks Matt,
I want to know how to move text on the slide to slide?
31-Mar-14 04:42
I do well


var currentSlide = 4;


and



if ( $(this).data('slideNum') == 4) {
centreCurrentSlide();
$(this).fadeTo( 'slow', currentSlideOpacity );
} else {
$(this).fadeTo( 'slow', backgroundSlideOpacity );
}




and it does not work, I can not boot from a specific slide (here the 4)

Do u have any solution ?
31-Jul-15 23:59
Heya! It's me again, a couple years later. My slider is suddenly not centering in regular browsers, but still looking great in mobile browsers. Any idea what's going on with the code to make this new off-center issue? I haven't changed the slider code since before the new issue started. The website is www.claytontimbrell.com
01-Aug-15 10:22
Maybe it's time for a rethink.

http://webmaster-talk.eu/forum/website-design/3583-no-argument-from-me-on-these-things-disappearing-for-ever

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
29-Aug-15 03:12
Next and previous button is not working also loading only one picture.
Can you give some hint where look for error.

Thanks
29-Aug-15 15:24
"Can you give some hint where look for error."

Sure! No problem.

Somewhere in your code, 'cause it works in the original.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
29-Aug-15 19:17
chrishirst, your comments are not helpful. Please stop replying to people and let the original poster address these things if he wants to.

Matt, do you think you can chime in and help us out? I know this an old post but it is still very useful to a lot of people! haven't seen a reply from you in awhile. Thanks in advance!
30-Aug-15 06:18
My post was precisely as helpful as YOUR QUESTION IS.


How exactly is ANYONE supposed to diagnose what you have done wrong by looking at the original code THAT WORKS????

Read THIS:
http://www.elated.com/forums/topic/5711/


Currently there are only two people answering topics here and NEITHER of us are mindreaders, HOW can we know why YOUR code does not work??????

The original works, your's doesn't, can YOU guess where the problem is???

[the following is for anyone and everyone reading]

IF you are going to ask a question that you want a really useful answer to THEN:

Either show us YOUR CODE or provide a URI that we can maybe use to diagnose what is wrong and where it is going wrong.

And no, codepen, jsfiddle and other such 'tools' are of no use, in this situation. Neither is showing us a picture. We need YOUR CODE and YOUR images to be able to test the problem.

If you do not have hosting, sign up for a free account at Hostinger (http://api.hostinger.co.uk/redir/8602986) or 2freehosting (http://api.2freehosting.com/redir/11782759)
Yes they are referral links, mine.

Or if you want serious hosting, tell me and I'll send you a proforma invoice for a http://tinf.co.uk account (Yep that's me as well)

Thank you for your attention and participation at Elated.

[Edited by chrishirst on 30-Aug-15 06:18]

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
31-Aug-15 23:29
Hi,
I am really new to web developer (and also js, css, and html).
What I am about to do is to make auto-scroll image gallery using this tutorial.
Could anyone tell me how to
1. auto-scroll this image gallery to right and
2. when it reached the end of image it will return to first image and
3. then redo the scroll (unlimited loop)

What I have been doing is this:


//new function to loop the scroll (well, it didnt work out)

function doLoop()
{
location.reload();
}
function moveLoop()
{
//console.log("moveLoop currentSlide:"+currentSlide);
//console.log("moveLoop preloadSlides:"+preloadSlides);
var ts = 4000;
var mult = 1;
var finish = false;
for (i=0; i<= preloadSlides; i++)
{
console.log("NOT Finnish");
setTimeout(moveRight, ts*mult);
mult++;
finish = true
}
if(finish)
{
console.log("Finnish");
setTimeout(doLoop, ts*(mult-2));
//init();
finish = false;
}
}

//and on handleSlideLoad()
...
...
if ( preloaded == preloadSlides || preloaded == totalSlides )
{
$('#loading').clearQueue().stop().fadeTo('slow', 0 );
$('#gallery').css('top',0);
$('#gallery').fadeTo('slow', 1 );
$('#leftButton').css('height',buttonHeight);
$('#rightButton').css('height',buttonHeight);
$('#rightButton').show();
addSlideHover();
loading = false;
moveLoop(); //<----added this
}
...
...


It is not a loop, because when it reached the end of index (last image) I reload the page using doLoop() function.
But this far it's acceptable because I put it on the iFrame, so users won't notice it's reloaded.
Can anyone point me to more proper way to do it?

[Edited by noobsee on 01-Sep-15 04:50]

 
New posts
Old posts

Follow Elated