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

Alright, np.

One last request: is it possible to apply fade effect instead of horizontal/vertical slide?

Thanks

@Ebrahim not with this plugin, there was a jQuery plugin that would parse out all images of a directory, but I am not sure what the name was.

Would it be possible, ahem, to display ALL images from a certain folder? That would be great.

Nevermind, figured it out.

Works great. Many thanks.

The code you posted for autoplay....ahem...where do I put it to work?

Many thanks.

@d00d if you paste the following code just after image.src = jqimg.attr('src'); that should put the correct image in view.

JavaScript:
  1. var inum = location.hash.replace(/^.*#/, '');
  2. el.pagination.find('[href$=#'+inum+']').click();

I only had a chance to test in FF, let me know if IE is playing nicely.

Is it possible to link to a certain image in the gallery from another webpage?

HTML:
  1. <a href="photos.php#4" rel="nofollow">link<a>

Isn't sufficiant, obviously. Maybe I need an onclick javascript call?

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

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

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

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