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: « 14 13 12 [11] 10 9 8 7 6 5 41 » Show All

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

[...] jQuery Gallery Scroller [...]

Hi,
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.
Thanks

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? http://electricprism.com/aeron.....rrows.html 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.

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

Thumbnails instead of numbers would be a great idea!

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

It is possible to set thumbails rather than numbers ?

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

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

[...] 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. [...]

Pages: « 14 13 12 [11] 10 9 8 7 6 5 41 » 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.585 seconds. Powered by WordPress visitor stats