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

Wow, you work fast! Thanks :)

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

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

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

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

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

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

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

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.

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

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.569 seconds. Powered by WordPress visitor stats