Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

September 9, 2007


jQuery: jqGalScroll v2.1 (Photo Gallery)

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

The Head

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jqGalScroll.js"></script>
  3. <script type="text/javascript">
  4.     $(document).ready(function(){
  5.         $("#demoOne").jqGalScroll();
  6.     });
  7. </script>
  1. <style>
  2.     @import url("common/css/jqGalScroll.css");
  3. </style>

The Body

  1. <ul id="demoOne">
  2.     <li><img src="" border="0"/></li>
  3.     <li><img src="" border="0"/></li>
  4.     <li><img src="" border="0"/></li>
  5.     <li><img src="" border="0"/></li>
  6.     <li><img src="" border="0"/></li>
  7.     <li><img src="" border="0"/></li>
  8.     <li><img src="" border="0"/></li>
  9. </ul>

The Outcome


Below are a list of options you can pass to the jqGalScroll plugin.

  1. ease: null,
  2.     speed:0,
  3.     height: 500,
  4.     width: 500,
  5.     titleOpacity : .60,
  6.     direction : 'horizontal' // vertical horizontal diagonal


I am in no way a great designer, so the example is very bare, but the follow urls are sites that done a nice job with the plugin:


Koes put a fire under my butt to improve this plugin and when I took too long he took what I had and added the horizontal scroll and in turn I ripped it from his hands and made it better :)


The jqGalScroll v2.1 Plugin is available at:
The jQuery core is available at:
The jQuery Easing Plugin v1.1.1 is available at:

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

137 Responses to “jQuery: jqGalScroll v2.1 (Photo Gallery)”



etc etc


lisandro, not sure what you are asking, can you rephrase?


Great use of JQuery, I really like it an is perfect for a current client’s site I am developing. However, in IE7 (haven’t tried in IE6 yet) on initial page load the page numbering in the bottom right and photo title in the top right is not visible till you go 1 – 2 photos into the unordered list and it just appears.

If you could look into this that would be great, I will check back

I am glad you like it; I don’t have time till much later tonight to take a look, if you can wait till then, I will look at it then. If you happen to find the issue and the fix before then, feel free to post it and I will include it.


I see the issue you are referring to, it looks like a style sheet issue, I will try to get it fixed asap. Thanks.

thanks Ben,

I couldn’t see it myself but thanks.


I will shoot you an email when I get it fixed.


Just tried to email you through your business address.. it didn’t go through. Shoot me an email I have something to show you.


An idea for improvement: to set a class to the current/active list item. That way one can highlight the current number.

Other than that, I really like the simplicity of it.

I did have that in there, but I must have “deleted” it when updating.

I will get that back in there.

very nice photogallery, but it don’t work very well in ie6 nad ie7.. images are a little bit displaced when you move between each photo. so in photo 15 you see half of the 14 you think is something easy to correct?



One of my other styles must be overriding the styles I made for the gallery, let me look at it and see how I can fix it. I do think this is an easy fix. I will post a fix a little later tonight.

Thanks for the catch and the nice words.

Hi there,

This is a great script, however can it be changed to stop the browser URL being changed as you click on the images, as this affects the usability of the back button.


Very good call, really thought I put that in there by default. I made the change already.

Wow, you work fast! Thanks :)

Hi again,

Sorry to pick out all the faults! This dosen’t work properly in ie 7 on windows. The images don’t scroll to an exact fit and some of the image above or below shows.

Any ideas?

Good catch… Again. That was a known issue before that I fixed, but I must have overwritten. It is a style sheet issue. I will post up a fix sometime tonight.

It still doesn’t work…

Hey man, great script!!
though on IE7 the problem persists when you scroll down, pictures dont fit. (Exactly what Jim explained)

Thanks for the comments, I am trying to launch a site for work and it is eating up all my time so I could not get to the fix just yet, hopefully this weekend.

Thanks for the patience.

Hey Benjamin !!
Hope the work on the website is fine!
any news about the IE7 fix ??

thanx alot.

I had the same problem in ie6 (don’t have Ie7) and I just change made a condition in the style

.jqGSContainer .jqGSImgContainer{}
.jqGSContainer .jqGSImgContainer ul,.jqGSContainer .jqGSImgContainer li{

sorry code can’t be posted maybe this way juste delete ‘code’
place your new style

Hey guys,
Thanks for your patience. I sadly have not had time to finish a ton of stuff on this site and look like crap and I hopefully will have everything cleaned up in the coming weeks.

Now the the IE7/IE6 fix, apparently there is a bug in the IE box rendering, I know, I know, shocking, but it is true, I would not lie. The fix is adding “margin-top:0;margin-bottom:0;” so:

.jqGSContainer .jqGSImgContainer ul,.jqGSContainer .jqGSImgContainer li{padding:0;margin:0;position:relative;}


.jqGSContainer .jqGSImgContainer ul,.jqGSContainer .jqGSImgContainer li{padding:0;margin:0;position:relative;margin-top:0;margin-bottom:0;}

Thanks to Georg over at I have actually never ran into this issue before.

@tsukiyo: Thanks for the suggestion, that is what I was getting ready to suggest, but since I hate to have to “really” hack for any browser, I had to research and find.

@All: make sure to post the url to the site/page that you are using the gallery on. I need the ego boost :)

Hi Bejamin,

i dont think that this fixed the IE7 bug that ukruss was talking about.
please try opening ur slideshow in IE7 and check it out !!!
it’s horrible when you click on image number 7 and higher …

@rika: You are correct, I tested it last night and it work, guess I was just seeing things. I wound up put a IE conditional statement and adding a new style sheet.

I will be working to update the whole site with a better layout and better documentation for this plugin, but for the time being, below is the condition statement:

<!–[if IE]>
<link rel=”stylesheet” href=”/articles/jqGalScroll/common/css/jqGalScrollIE.css” type=”text/css” />

Did you changed your jqGalScroll page? Unless I’m missing it, I only see info on your jqGalViewII on this page. Can you let me know where i can find your jqGalScroll?

BTW…your work is awesome.

@phuong: the genious that I am, I accidentally included the wrong file for the page. Thanks for the catch.

Thank you for the kind words, I do try. :)


This works really well and would be perfect for my new website (when I finally
settle on a design lol). I have a few questions though:

1) How easy would it be to make the images scroll from left to right instead of
up and down?
2) Have you got an example of the previous and next arrows in action? I know
you took them out, but I would really like to use them (sorry for being so
difficult lol)


@Dave: I totally know how you feel about a design, I just did this site and not totally digging it, so it may be changing again :(

1. I am not sure it would be too difficult, untested, but you should be able to do the follow:

  1. // about line 102 find:
  2. $this.stop().animate({top:-($children.height()*href)},el.opts.speed, el.opts.ease);
  3. // change to:
  4. $this.stop().animate({left:-($children.width()*href)},el.opts.speed, el.opts.ease);

Now you may need to mess around with the style sheet to have the LI float:left and set the height to the height of your tallest image and set the width to auto or 100% or not at all. I don’t have time to test it myself, but if you get it working or even if you don’t let me know and I can try to find time.

2. I did take the next and previous buttons out but the link to the code is below. I’d had hoped to implement them again with a switch to turn them on or off, but my todo list is pretty big at the moment. Again, if you get it working, please post back so I can steal, ermmm, borrow it :)

old jqGalScroll

Thanks for getting back to me so quick! The first part made the images slide from left to right fine, but i really struggled to get the css working. All I can see is the first image and nothing else so it just scrolls to white. I am prob just being stupid, but any help greatly appreciated.


@Dave: today is going to be real busy for me, so I will try to take a look later in the day to see what can be done.

I like this one very much.

I do miss the option to just use up/down in stead navigating via the numbers, would this be hard to implement ?

For the numbers itself it would be nice if you would set a class once a number is selected, as one does not know where they are in terms of navigating.

bakman, take a look at, this is the first version of the plugin. You should be able to just grab the code from there and put it into the current version.

Hi, I try your the latest version at but problem with IE7 continuing. Title and pagination items don’t displaying because they are below main unordered list. I replaced append function with prepend and now it is all right. Is it correct path?

Great plugin! Is there a way to make this autoplay?

@Patrik: Sorry for the late reply, I must have over looked your post. The correct path is

@Mike: There is, try

  1. // after el.pagination.append($ul);
  3. interVal = setInterval(function(){
  4.     if(el.pagination.find('.selected').parent().next().children('a').size()){
  5.         el.pagination.find('.selected').parent().next().children('a').click();
  6.     }
  7.     else{
  8.         el.pagination.find('li:eq(0)').children('a').click();
  9.     }
  10. }, 2000);

You may need to play with the “2000”, but that should work.

[37] Funny :) It is totally re-made. I will try it.

I have a problem with IE7. Can you paste me the link about the fix ?

@jhd: What fix are you referring to?


hi Ben,

great gallery. a few quick questions:

1. how do you make it so it scrolls horizontally, not vertically?
2. what’s the status update on ie6 and ie7 bug fixes people were asking about/

thanks man.


my apology. i did find a response to my first question.

another question that i just thought of. sorry for the multiple comments.
how does it work when you have a mix of horizontal and vertical images? from your demo above, all the pictures were horizontal.

@koesbong : This link is to the IE bug fix

Not sure what you mean by “mix of horizontal and vertical images,” are you meaning a mix of landscape and vertical images not scrolling horizontal images? If you mean the first, if you set the height and width of the container, in the demo above I set it to 450, the images *should* be resized to fix that area, if they are smaller then that area, it will just get aligned in the center. Sadly it has been a long time since I tested that, but it should work.

Hello Benjamin,

I try to make the links selected, but I can’t.
Once a link is clicked, the older selected link stays selected…

I took a look at your older script :
and the lines :

  1. var $ul = $('');
  3.             for(var i = 0; i &lt; $children.size(); i++){
  4.                 var selected = '';
  5.                 if(i == 0) selected = 'selected';
  7.                 var $a = $('<a href="#'+(i)+'" rel="nofollow">'+(i+1)+'</a>').css({opacity:.70});
  8.                 $ul.append($a);
  9.             };
  10.             $jqgsPagination.append($ul)
  11.             var $jqgsPaginationLinks = $jqgsPagination.find('a').click(function(){
  12.                 var href = this.href.replace(/^.*#/, '');
  13.                 $jqgsPaginationLinks.filter('.selected').removeClass('selected');
  14.                 $(this).addClass('selected');
  15.                 $parent.animate({marginTop:-($children.height()*href)},o.speed, o.ease);
  16.                 $.fn.jqGalScroll.getTitle($children[href],$jqgstitle);
  17.                 index = href;
  18.             });

but I dont know what to change in your last script (i’m not good in javascript…)

Thanks for your help


Hey David,

I had this problem before. try this:

Try changing:




i can email you my modified version of jqGalScroll if you’d like. my email is my name stated above at

David, change line 13 from “filter” to “find” and see if that works.

David, do take koesbong on his offer, he made some really nice additions to the code that I am looking to add as soon as things die down for me.

koesbong: a huge hat tip to you for your work, I do appreciate it.

Did the left to right issue ever get fixed? The images won’t stack up left to right for me.

It did, I have not had time to post the code yet, I can send you what koesbong did (

Hey Ross,

As mentioned by Ben, feel free to take a look at the gallery I’ve created based on Ben’s jgGalScroll. Feel free to email me if you have any questions on that as well. my email is my name stated above at

koesbong: I working on getting your version into my WP plugin PhotoXhibit

wow, awesome. hope it’s going well.

i am sure you know more about this better than i do, but if there’s anything i can contribute to, let me know :-)

I’ve been tinkering around with this script for a website I’m working on and I was thinking of trying to add a lightbox effect to it. The problem is, when I wrap my image with a hyperlink, the slider no longer works. I don’t know a huge amount about javascript but I can edit scripts to my liking, usually. Just wondering if anyone knew of an easy way of letting me put the image into a link tag.

bobby, the quickest thing I could come up with something like this:

Give each image an extra attribute name “large”

  1. <img src="pathtoregularimage" large="pathtolightboximage"/>

And in the js about line 83 change that line to do something like:

  1. $img.css({marginLeft:-image.width*.5,marginTop:-image.height*.5,cursor:'pointer'})
  2. .click(function(){
  3.      var newSrc = $(this).attr('large');
  4.      // put lightbox code here
  5. })
  6. .fadeIn();

Now after looking the lightBox code, I am not sure how to mash it together. I can point you in a better direction if you want to thickbox.

I don’t mind using Thickbox either, I actually used it a while back, I’d just forgotten about it. So if you don’t mind, I’d appreciate hearing about how to use thickbox in junction with your script. I’ll see if I can figure it out myself as well with what you’ve given me. Thanks so much for your support!

This is a great script, Thanks

I have a blog-list style site so I was planning on having multiple jqGallScroll galleries per page. When I have more than one on a page and click on a gallery to scroll through, it moves all the other galleries on the page as well. Any ideas on how to fix this?

hey ross,

i’m not sure if this would work, but the first thing that came to mind is you could assign each gallery its own different class name, and then pass itto the jqGallScroll js. eg. change ul.jqGalScroll to whatever classname the gallery is called.


ben could probably answer it better than i can, but i thought i’d try to contribute.

I thought of this earlier but would that mean I’d have to copy each gallery style in the css only to rename its class title? If I have 20 galleries that would be a lot of copy and pasting.

Since the number buttons work fine I think the image click that was added in the java is the issue. Maybe there is a line of code that needs to be included?

Ross, sorry for the delayed reponses, things are crazy with other things.

You should be able to give each gallery a separate class/id and then do something like:

  1. $("#gallery1, #gallery2, #gallery3").jqGalScroll({height:450,width:750,ease:'easeInOutCubic',speed:1000});

I will try to test that out tonight, but when I built this plugin, that was the idea behind it, to be able to have multiple galleries per page.

It’s free? Congratulations is pretty well the effect continues. Well use on any site? You must put some credit?

Congratulations is beautiful, thank you for sharing your work.

I’ll try working on it today. I’m using the horizontal version in that helps. Ditto with Rafael, thanks for sharing your work and ideas.

Hi, does this scroller have the ability to scroll horizontally?

@Ross did not have time to test it, but it is on the schedule, but if you get to it first let me know how it comes out.

@David The newest version that koesbong helped (really I helped him) put together does have support for it but has not been cleaned up as of yet, if you would like to look at it as is, I can email it to you.

@bobby I have not forgotten about you, I will post some directions soon.

Hey David,

I have made some changes to Ben’s script to make it scroll horizontally. Check it out here:

Let me know if that’s what you’re looking for, and if it is: feel free to contact me at my name stated above at for any questions.

I had no luck by creating separate divs/classes. It works fine with the numbers, but when you click on the gallery to slide it it moves all the galleries on the page. (If you have multiple galleries per page. I am also using koesbong’s edition)

Hey all,
I just posted a new version of this plugin that should make it better, feed back is welcomed.

Hi, that looks good. In terms of cleaning up, what still needs to be done to it?

@David, nothing really, just need to have better styled examples.

Is it possible to link to a certain image in the gallery from another webpage?

  1. <a href="photos.php#4" rel="nofollow">link<a>

Isn’t sufficiant, obviously. Maybe I need an onclick javascript call?

@d00d if you paste the following code just after image.src = jqimg.attr(‘src’); that should put the correct image in view.

  1. var inum = location.hash.replace(/^.*#/, '');
  2. el.pagination.find('[href$=#'+inum+']').click();

I only had a chance to test in FF, let me know if IE is playing nicely.

The code you posted for autoplay….ahem…where do I put it to work?

Many thanks.

Nevermind, figured it out.

Works great. Many thanks.

Would it be possible, ahem, to display ALL images from a certain folder? That would be great.

@Ebrahim not with this plugin, there was a jQuery plugin that would parse out all images of a directory, but I am not sure what the name was.

Alright, np.

One last request: is it possible to apply fade effect instead of horizontal/vertical slide?


#95 Benjamin Sterling Says: “I only had a chance to test in FF, let me know if IE is playing nicely.”

Yep, that works both in Firefox and IE7. Good show, sir.

It is possible to set thumbails rather than numbers ?

Thumbnails instead of numbers would be a great idea!

@Kiltro @Justone Yes, that is great idea I will make a note, but if you come up with something in the meantime, feel free to let me know.

Hi Benjamin! First of all, great plugin! Works like a charm and it’s much better than flash. I was wondering, Is a version of jqGalScroll with arrow navigation instead of numbers an idea? and maybe an option with different transitions like fade and bounce etc.

It seems to be that the code is a bit messy, or isn’t that correct. I did a check up of my website with W3C validator and the output of the XHTML validation markup gave lots of errors :(. i’m trying to get this fixed by myself, hopefully i get this done, because i’m no coder :). but maybe you can take this with you for the future.

It’s really a nice work. Suppose if I wanted to use this plugin for say 1000 images, I wanted to display only 20 at a time in page, how do I do it? Is it possible. Please let me know.

Hi, This is superb, thank you.

One thing has been driving me crazy, for most of today.

Do you know how I can position the page numbers (pagination) on top of the images in the bottom right hand corner? (as opposed to having the pagination always below the images).

Many Thanks,


Hey Benjamin nice work !!

i am trying to put this into another effect on my site.

Column 2 (from the left) when you click it, it opens and is supposed to be your script, however even though it loads, everything is static and dos not rotate images.

just to show that i have the proper setup, i have copied and pasted exactly into my other page: (just your script) with same links.

Can you tell me why yours will not run inside of this other one?
Am i missing a simple simple thing here?

Its been hours and i have no idea.. if i had any hair it would be gone by now.

Can you please help me?
I’d gladly throw you some paypal cash if you can…



I have a problem that I hope someone could help me solve. I’ve installed the CSS plugin and it works really great. The only problem is that I also have other images outside of the image gallery that make layout of the website. What happends is that the gallery CSS styles add padding or spacing around all images on the webpage, thus creating an invisible border that I would like to get rid of. Could some one tell me how to add another CSS or get rid of that portion of formatting that creates border around all images?

Hi Folks,

i would like to use jqgalscroll, but with a thickbox link on each image. Is anyone here who get this work and can tell me how?


Any ideas on how to pull images from a directory, instead of individually coding them into the html?

Is there an option to have this auto scroll thumbnails?

thank you

Another question…

Is it possible to make the scrolling images into links? So, for example one image could be an advert for the contact page that could link to ‘contact.html’.

I tried:

but it didn’t work. Any suggestions?

i am trying to use with photoxhibit for wordpress 2.5. Do I need to add the javascript code to my page template in order to get this to work?

All i am getting is the output of the non javascript version, but I have javascript turned on in my browser.

The basic setup in WordPress with no css customization should look like the example you have correct?

Thanks. The other plugins for photoxhibit work great. Nice work.


Is there anyway to have the slides autoplay and have the images be links?

Hi, brilliant simple image gallary. Its nice to see you are using jquery. First of all well done, W3C would take like 10mins to sort out to no quarels there. I am currently developing a mouse down flick event similer to the iphone but you will be able to use the mouse to flick a div, wrapped in a inner div like what your solution uses. I’ve notices you’ve done much of the maths. I just want to thank you, and say how this solution will help me do mine.


Hi Ben,

Great work with the script, I have been trying to get the images to autoplay on page load. I looked through all the comments above and see the mention of auotplay a few times but i can not work out where this code is.

Can you please let me know what i need to add to the js so that the images auto play.

Thanks in-advance.


@Rahim There is a way to set up an autoplay option, I am not at my computer right now but will take a look when I get back to it.


  1. jqGalScroll, faites défiler vos images avec jQuery
  2. JQuery: jqGalScroll 2.0 (Galería de fotos) « Xyberneticos
  3. jQuery: jqGalScroll 2.0 ile kullan??l? bir Foto Galerisi yapmak |
  4. jqgalscroll photo gallery :
  5. lost node » Blog Archive » 25 Code Snippets for Web Designers (Part7)
  6. 25 Code Snippets for Web Designers (Part7) | Technology News
  7. The Young Bostons: Dustin » links for 2007-10-27
  8. jQuery: jqGalScroll 2.0 (Photo Gallery) - Graphic Design Forum and Web Design Forum
  9. Dou? galerii cu jQuery |
  10. 240 plugins jquery :
  11. Benjamin Sterling Galleries: Wordpress Photo/Image Gallery Plugin for Flickr & Picasa | The Book and the Cover
  12. Diversos Links para desenvoledores de javascript | Blog do teo
  13. Galerías de imágenes gratis | Diego Jiménez
  14. Jquery?N??? » -???
  15. 5 Diashows für jQuery
  16. LongWay's Blog » Blog Archive ???jQuery??
  17. 27 Best Javascript effects at The Job Poster News
  18. Design Shrine | 25 Code Snippets for Web Designers
  19. ???? » ??????????jquery??
  20. ???? » ??????????jquery??
  21. jqGalScroll - a smooth image scrolling
  22. The ultimate jQuery Plugin List |
  23. 240 adet jquery ekelntisi - Volkan ?entürk
  24. jQuery????? - DesignWalker
  25. » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : des css pour votre design html
  26. dorms
  27. jQuery????.(240) | Sapling soliloquize
  28. ?????240??jQuery?? - ????
  29. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars
  30. ????? » 240?JQuery??
  31. ??????? » Blog Archive » jQuery: jqGalScroll v2.1 (Photo Gallery)
  32. links for 2008-06-11 | Olivier Galluchot
  33. ???? - ?????240??jQuery??
  34. ??240??jQuery?? | ?????????
  35. Novidades « Blog
  36. Javascript, Flash, & AJAX slideshows and gallery transitions |
  37. Web-kreation - 100 + 1 FREE photo/image galleries (AJAX, Flash, PHP)

Learn from my mistakes, I got burnt by the flame, you don't have to.

RSS Feed Link My Hosting of Choice

70 queries. 0.403 seconds. Powered by WordPress visitor stats