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

@Patrik: Sorry for the late reply, I must have over looked your post. The correct path is http://www.benjaminsterling.co.....lScroll.js.

Great plugin! Is there a way to make this autoplay?

Hi, I try your the latest version at http://www.benjaminsterling.co.....GalScroll/ but problem with IE7 continuing. Title and pagination items don't displaying because they are below main unordered list. I replaced append function with prepend and now it is all right. Is it correct path?

[...] JqGallScroll: es un plugin para jQuery que nos permite crear una sencilla galería numerada, con una bonita transición y la posibilidad de incluir textos sobre la imágenes. [...]

[...] jQuery jqGalScroll 2.0. [...]

bakman, take a look at http://www.benjaminsterling.co.....GalScroll/, this is the first version of the plugin. You should be able to just grab the code from there and put it into the current version.

I like this one very much.

I do miss the option to just use up/down in stead navigating via the numbers, would this be hard to implement ?

For the numbers itself it would be nice if you would set a class once a number is selected, as one does not know where they are in terms of navigating.

@Dave: today is going to be real busy for me, so I will try to take a look later in the day to see what can be done.

Thanks for getting back to me so quick! The first part made the images slide from left to right fine, but i really struggled to get the css working. All I can see is the first image and nothing else so it just scrolls to white. I am prob just being stupid, but any help greatly appreciated.

Dave

@Dave: I totally know how you feel about a design, I just did this site and not totally digging it, so it may be changing again :(

1. I am not sure it would be too difficult, untested, but you should be able to do the follow:

JavaScript:
  1. // about line 102 find:
  2. $this.stop().animate({top:-($children.height()*href)},el.opts.speed, el.opts.ease);
  3. // change to:
  4. $this.stop().animate({left:-($children.width()*href)},el.opts.speed, el.opts.ease);

Now you may need to mess around with the style sheet to have the LI float:left and set the height to the height of your tallest image and set the width to auto or 100% or not at all. I don't have time to test it myself, but if you get it working or even if you don't let me know and I can try to find time.

2. I did take the next and previous buttons out but the link to the code is below. I'd had hoped to implement them again with a switch to turn them on or off, but my todo list is pretty big at the moment. Again, if you get it working, please post back so I can steal, ermmm, borrow it :)

old jqGalScroll

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