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: « 14 [13] 12 11 10 9 8 7 6 5 41 » Show All

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

Hi, brilliant simple image gallary. Its nice to see you are using jquery. First of all well done, W3C would take like 10mins to sort out to no quarels there. I am currently developing a mouse down flick event similer to the iphone but you will be able to use the mouse to flick a div, wrapped in a inner div like what your solution uses. I've notices you've done much of the maths. I just want to thank you, and say how this solution will help me do mine.

Cheers,
Adam.

[...] jQuery: jqGalScroll v2.1 (Photo Gallery) | The Book and the Cover (tags: ajax javascript jquery webdesign) [...]

Is there anyway to have the slides autoplay and have the images be links?

Thanks.

[...] jQuery: jqGalScroll v2.1 (Photo Gallery) - ?????????? ??????? ??? ?????. ?????????? ???????????? ? ???????????????. [...]

i am trying to use with photoxhibit for wordpress 2.5. Do I need to add the javascript code to my page template in order to get this to work?

All i am getting is the output of the non javascript version, but I have javascript turned on in my browser.

The basic setup in Wordpress with no css customization should look like the example you have correct?

Thanks. The other plugins for photoxhibit work great. Nice work.

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

Another question...

Is it possible to make the scrolling images into links? So, for example one image could be an advert for the contact page that could link to 'contact.html'.

I tried:

but it didn't work. Any suggestions?

thank you

Is there an option to have this auto scroll thumbnails?

Pages: « 14 [13] 12 11 10 9 8 7 6 5 41 » 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. 1.709 seconds. Powered by WordPress visitor stats