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
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jqGalScroll.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#demoOne").jqGalScroll();
- });
- </script>
- <style>
- @import url("common/css/jqGalScroll.css");
- </style>
The Body
- <ul id="demoOne">
- <li><img src="http://farm3.static.flickr.com/2139/2038186348_58925c20ca.jpg" border="0"/></li>
- <li><img src="http://farm3.static.flickr.com/2194/2037390693_8acc544048.jpg" border="0"/></li>
- <li><img src="http://farm3.static.flickr.com/2156/2037392621_c64ae1ca81.jpg" border="0"/></li>
- <li><img src="http://farm3.static.flickr.com/2409/2037390277_1097dff9e5.jpg" border="0"/></li>
- <li><img src="http://farm3.static.flickr.com/2403/2134348146_fd6a7d0e74.jpg" border="0"/></li>
- <li><img src="http://farm3.static.flickr.com/2217/2134343276_2fd803b40e.jpg" border="0"/></li>
- <li><img src="http://farm3.static.flickr.com/2032/2133564381_4a1f66bfbb.jpg" border="0"/></li>
- </ul>
The Outcome
Options
Below are a list of options you can pass to the jqGalScroll plugin.
- ease: null,
- speed:0,
- height: 500,
- width: 500,
- titleOpacity : .60,
- 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.
1. lisandro