rss

The Book and the Cover

Are you a first timer here? Or maybe you've been here before but haven't gotten around to subscribing yet? Pick up the feed, just follow the arrow or favoritize this blog over at Technorati to keep in touch!

Sep 9

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.



Add to Mixx!

109 Responses to “jQuery: jqGalScroll v2.1 (Photo Gallery)”

Pages: [11] 10 9 8 7 6 5 4 3 2 1 » Show All

  1. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars Says:

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

  2. Chinkone Says:

    Hi Benjamin! First of all, great plugin! Works like a charm and it's much better than flash. I was wondering, Is a version of jqGalScroll with arrow navigation instead of numbers an idea? http://electricprism.com/aeron.....rrows.html and maybe an option with different transitions like fade and bounce etc.

    It seems to be that the code is a bit messy, or isn't that correct. I did a check up of my website with W3C validator and the output of the XHTML validation markup gave lots of errors :(. i'm trying to get this fixed by myself, hopefully i get this done, because i'm no coder :). but maybe you can take this with you for the future.

  3. Benjamin Sterling Says:

    @Kiltro @Justone Yes, that is great idea I will make a note, but if you come up with something in the meantime, feel free to let me know.

  4. Justone Says:

    Thumbnails instead of numbers would be a great idea!

  5. 240 adet jquery ekelntisi - Volkan ?entürk Says:

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

  6. Kiltro Says:

    It is possible to set thumbails rather than numbers ?

  7. d00d Says:

    #95 Benjamin Sterling Says: "I only had a chance to test in FF, let me know if IE is playing nicely."

    Yep, that works both in Firefox and IE7. Good show, sir.

  8. The ultimate jQuery Plugin List | Kollermedia.at Says:

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

  9. jqGalScroll - a smooth image scrolling Says:

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

Pages: [11] 10 9 8 7 6 5 4 3 2 1 » Show All

Leave a Reply

The Tag Cloud

Sponsors

Banner, 125x125px

Sponsors Links

Similar Posts

Posts Stats

  • Visited 46917 times, 311 so far today

My jQuery Plugins

My WordPress Plugins

Donate

Connections / Badge Farm

  • StumbleUpon
  • Technorati Fav
  • View Benjamin Sterling's profile on LinkedIn
  • Digg!

My Blog Log

visitor stats