JQGalScroll 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

Download

The jqGalScroll v2.1 Plugin is available at:

http://www.mediafire.com/?b84ecd7e86wx299
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.

Leave a comment