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

@David, nothing really, just need to have better styled examples.

Hi, that looks good. In terms of cleaning up, what still needs to be done to it?

Hey all,
I just posted a new version of this plugin that should make it better, feed back is welcomed.

I had no luck by creating separate divs/classes. It works fine with the numbers, but when you click on the gallery to slide it it moves all the galleries on the page. (If you have multiple galleries per page. I am also using koesbong's edition)

[...] Gallery with a scroll [...]

Hey David,

I have made some changes to Ben's script to make it scroll horizontally. Check it out here: http://www.ryanbrenizer.com/editorial

Let me know if that's what you're looking for, and if it is: feel free to contact me at my name stated above at gmail.com for any questions.

@Ross did not have time to test it, but it is on the schedule, but if you get to it first let me know how it comes out.

@David The newest version that koesbong helped (really I helped him) put together does have support for it but has not been cleaned up as of yet, if you would like to look at it as is, I can email it to you.

@bobby I have not forgotten about you, I will post some directions soon.

Hi, does this scroller have the ability to scroll horizontally?

I'll try working on it today. I'm using the horizontal version in that helps. Ditto with Rafael, thanks for sharing your work and ideas.

Congratulations is beautiful, thank you for sharing your work.

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