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

Sammy,
I did have that in there, but I must have "deleted" it when updating.

I will get that back in there.

An idea for improvement: to set a class to the current/active list item. That way one can highlight the current number.

Other than that, I really like the simplicity of it.

Ben,

Just tried to email you through your business address.. it didn't go through. Shoot me an email I have something to show you.

Vince

Vince,
I will shoot you an email when I get it fixed.

thanks Ben,

I couldn't see it myself but thanks.

Vince

Vincea,
I see the issue you are referring to, it looks like a style sheet issue, I will try to get it fixed asap. Thanks.

Vincea,
I am glad you like it; I don't have time till much later tonight to take a look, if you can wait till then, I will look at it then. If you happen to find the issue and the fix before then, feel free to post it and I will include it.

Thanks.

Benjamin,

Great use of JQuery, I really like it an is perfect for a current client's site I am developing. However, in IE7 (haven't tried in IE6 yet) on initial page load the page numbering in the bottom right and photo title in the top right is not visible till you go 1 - 2 photos into the unordered list and it just appears.

If you could look into this that would be great, I will check back

lisandro, not sure what you are asking, can you rephrase?

and...

Up
Down

etc etc

?

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