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.



Pages: « 1413 12 11 10 9 [8] 7 6 5 4 31 » Show All

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

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

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.

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?

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 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?

This is a great script, Thanks

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!

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'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.

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

Pages: « 1413 12 11 10 9 [8] 7 6 5 4 31 » Show All

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

RSS Feed Link

42 queries. 0.746 seconds. Powered by WordPress visitor stats