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: « 1411 10 9 8 7 [6] 5 4 3 2 1 » Show All

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

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

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.

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

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

IE6 AND IE7 FIX

@jhd: What fix are you referring to?

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

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

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

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

Pages: « 1411 10 9 8 7 [6] 5 4 3 2 1 » 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.601 seconds. Powered by WordPress visitor stats