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

[...] jqGalScroll v2.1 (Photo Gallery)- jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo [...]

Any ideas on how to pull images from a directory, instead of individually coding them into the html?

Hi Folks,

i would like to use jqgalscroll, but with a thickbox link on each image. Is anyone here who get this work and can tell me how?

thx
Rob

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

I have a problem that I hope someone could help me solve. I've installed the CSS plugin and it works really great. The only problem is that I also have other images outside of the image gallery that make layout of the website. What happends is that the gallery CSS styles add padding or spacing around all images on the webpage, thus creating an invisible border that I would like to get rid of. Could some one tell me how to add another CSS or get rid of that portion of formatting that creates border around all images?

Hey Benjamin nice work !!

i am trying to put this into another effect on my site.
http://www.pellerinstudio.com/clients/test/

Column 2 (from the left) when you click it, it opens and is supposed to be your script, however even though it loads, everything is static and dos not rotate images.

just to show that i have the proper setup, i have copied and pasted exactly into my other page:
http://www.pellerinstudio.com/.....llery.html (just your script) with same links.

Can you tell me why yours will not run inside of this other one?
Am i missing a simple simple thing here?

Its been hours and i have no idea.. if i had any hair it would be gone by now.

Can you please help me?
I'd gladly throw you some paypal cash if you can...

please.

-Chris

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

Hi, This is superb, thank you.

One thing has been driving me crazy, for most of today.

Do you know how I can position the page numbers (pagination) on top of the images in the bottom right hand corner? (as opposed to having the pagination always below the images).

Many Thanks,

Simon

munchie...

classic scorched earth...

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