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

Hey Benjamin !!
Hope the work on the website is fine!
any news about the IE7 fix ??

thanx alot.

[...] opresc la dou?. Benjamin Sterling ne ofer? pe situl lui personal diverse pluginuri. De exemplu jqGalScroll, o solu?ie simpl?, poate chiar prea simpl?, pentru afi?area unor fotografii. Un proiect cu [...]

jimt/ukruss,
Thanks for the comments, I am trying to launch a site for work and it is eating up all my time so I could not get to the fix just yet, hopefully this weekend.

Thanks for the patience.

Hey man, great script!!
though on IE7 the problem persists when you scroll down, pictures dont fit. (Exactly what Jim explained)

It still doesn't work...

Jim,
Good catch... Again. That was a known issue before that I fixed, but I must have overwritten. It is a style sheet issue. I will post up a fix sometime tonight.

Hi again,

Sorry to pick out all the faults! This dosen't work properly in ie 7 on windows. The images don't scroll to an exact fit and some of the image above or below shows.

Any ideas?

[...] jqGalScroll 2.0 (Photo Gallery) jQuery: jqGalScroll 2.0 (Photo Gallery) | The Book and the Cover __________________ Colour Printing and Integrated Cards || Graphic Design & Colour Printers [...]

[...] jQuery: jqGalScroll 2.0 (Photo Gallery) | The Book and the Cover The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination. (tags: gallery jquery lightbox javascript html ajax images) This entry was written by Dustin Boston and posted on October 27, 2007 at 3:20 pm and filed under Del.icio.us. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Thanks to everyone who helped us [...]

[...] jsGalScroll - The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination [...]

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