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

JavaScript:
  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>

CSS:
  1. <style>
  2.     @import url("common/css/jqGalScroll.css");
  3. </style>

The Body

HTML:
  1. <ul id="demoOne">
  2.     <li><img src="http://farm3.static.flickr.com/2139/2038186348_58925c20ca.jpg" border="0"/></li>
  3.     <li><img src="http://farm3.static.flickr.com/2194/2037390693_8acc544048.jpg" border="0"/></li>
  4.     <li><img src="http://farm3.static.flickr.com/2156/2037392621_c64ae1ca81.jpg" border="0"/></li>
  5.     <li><img src="http://farm3.static.flickr.com/2409/2037390277_1097dff9e5.jpg" border="0"/></li>
  6.     <li><img src="http://farm3.static.flickr.com/2403/2134348146_fd6a7d0e74.jpg" border="0"/></li>
  7.     <li><img src="http://farm3.static.flickr.com/2217/2134343276_2fd803b40e.jpg" border="0"/></li>
  8.     <li><img src="http://farm3.static.flickr.com/2032/2133564381_4a1f66bfbb.jpg" border="0"/></li>
  9. </ul>

The Outcome

Options

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

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

Styling

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:

Thanks

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 :) http://www.koesbong.com/

Download

The jqGalScroll v2.1 Plugin is available at: http://bs-jquery-plugins.googl.....ll.2.1.zip.
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.



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

and...

Up
Down

etc etc

?

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

Benjamin,

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

Vincea,
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.

Thanks.

Vincea,
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.

Vince

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

Ben,

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

Vince

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.

Sammy,
I did have that in there, but I must have "deleted" it when updating.

I will get that back in there.

hi,
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 ..do you think is something easy to correct?

thanks

albert

Albert,
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.

[...] jqGalScroll est un plugin pour jQuery qui peut vous créer une mini galerie à partir d’une simple liste d’images. [...]

[...] jQuery jsGalScroll es un Plugin que nos permitirá agrupar imágenes y convertirlas en una especie de galería de fotos con paginación. [...]

[...] Bugün uzun zamand?r takip edemedi?im Xyberneticos adl? Site’de kar??la?t???m bu jQuery ile geli?tirilmi? jqGalScroll 2.0 galeri eklentisi, benzerine Haber sitelerinde rastlayabilece?imiz türden bir?ey. Eklenti, Resim üzerine [...]

[...] web: http://benjaminsterling.com/20.....o-gallery/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

[...] jsGalScroll - The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination [...]

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.

Thanks

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

Wow, you work fast! Thanks :)

[...] jsGalScroll - The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination [...]

[...] jQuery: jqGalScroll 2.0 (Photo Gallery) | The Book and the Cover The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination. (tags: gallery jquery lightbox javascript html ajax images) This entry was written by Dustin Boston and posted on October 27, 2007 at 3:20 pm and filed under Del.icio.us. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Thanks to everyone who helped us [...]

[...] jqGalScroll 2.0 (Photo Gallery) jQuery: jqGalScroll 2.0 (Photo Gallery) | The Book and the Cover __________________ Colour Printing and Integrated Cards || Graphic Design & Colour Printers [...]

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?

Jim,
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)

jimt/ukruss,
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.

[...] opresc la dou?. Benjamin Sterling ne ofer? pe situl lui personal diverse pluginuri. De exemplu jqGalScroll, o solu?ie simpl?, poate chiar prea simpl?, pentru afi?area unor fotografii. Un proiect cu [...]

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{
padding:0px;
margin-bottom:-3px;
position:relative;}

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;}

becomes:

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

Thanks to Georg over at http://blog.gkaindl.com/2007/0.....annoyance/. 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" />
<![endif]-->

[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs - easily create [...]

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. :)

Hi,

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

@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:

JavaScript:
  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

@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 http://www.benjaminsterling.co.....GalScroll/, 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.

[...] jQuery jqGalScroll 2.0. [...]

[...] JqGallScroll: es un plugin para jQuery que nos permite crear una sencilla galería numerada, con una bonita transición y la posibilidad de incluir textos sobre la imágenes. [...]

Hi, I try your the latest version at http://www.benjaminsterling.co.....GalScroll/ 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 http://www.benjaminsterling.co.....lScroll.js.

@Mike: There is, try

JavaScript:
  1. // after el.pagination.append($ul);
  2.  
  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.

[...] lightBox plugin.jQuery Image Strip.jQuery slideViewer.jQuery jqGalScroll 2.0.jQuery - jqGalViewII.jQuery - jqGalViewIII.jQuery Photo Slider.jQuery Thumbs - easily create [...]

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

@jhd: What fix are you referring to?

IE6 AND IE7 FIX

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.

-koes

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 http://www.benjaminsterling.co.....rollIE.css

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.

[...] jqGalScroll 2.0 (Photo Gallery) Diese Bildergalerie von Benjamin Sterling scrollt ebenfalls, diesmal aber vertikal. [...]

[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs - easily create [...]

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 : http://benjaminsterling.com/ex.....lScroll.js
and the lines :

CODE:
  1. var $ul = $('');
  2.            
  3.             for(var i = 0; i &lt;$children.size(); i++){
  4.                 var selected = '';
  5.                 if(i == 0) selected = 'selected';
  6.                
  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

David

Hey David,

I had this problem before. try this:

Try changing:

el.pagination.filter('.selected').removeClass('selected');

to

el.pagination.find('.selected').removeClass('selected');

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

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 (http://www.ryanbrenizer.com/).

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 gmail.com

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"

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

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

JavaScript:
  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.

$(document).ready(function(){
$("ul.jqGalScroll").jqGalScroll({height:450,width:750,ease:'easeInOutCubic',speed:1000});
});

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:

JavaScript:
  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: http://www.ryanbrenizer.com/editorial

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 gmail.com for any questions.

[...] Gallery with a scroll [...]

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.

[...] jsGalScroll - The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination [...]