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

Hi,

This works really well and would be perfect for my new website (when I finally
settle on a design lol). I have a few questions though:

1) How easy would it be to make the images scroll from left to right instead of
up and down?
2) Have you got an example of the previous and next arrows in action? I know
you took them out, but I would really like to use them (sorry for being so
difficult lol)

Dave

@phuong: the genious that I am, I accidentally included the wrong file for the page. Thanks for the catch.

Thank you for the kind words, I do try. :)

Did you changed your jqGalScroll page? Unless I'm missing it, I only see info on your jqGalViewII on this page. Can you let me know where i can find your jqGalScroll?

BTW...your work is awesome.

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

@rika: You are correct, I tested it last night and it work, guess I was just seeing things. I wound up put a IE conditional statement and adding a new style sheet.

I will be working to update the whole site with a better layout and better documentation for this plugin, but for the time being, below is the condition statement:

<!--[if IE]>
<link rel="stylesheet" href="/articles/jqGalScroll/common/css/jqGalScrollIE.css" type="text/css" />
<![endif]-->

Hi Bejamin,

i dont think that this fixed the IE7 bug that ukruss was talking about.
please try opening ur slideshow in IE7 and check it out !!!
it's horrible when you click on image number 7 and higher ...

Hey guys,
Thanks for your patience. I sadly have not had time to finish a ton of stuff on this site and look like crap and I hopefully will have everything cleaned up in the coming weeks.

Now the the IE7/IE6 fix, apparently there is a bug in the IE box rendering, I know, I know, shocking, but it is true, I would not lie. The fix is adding "margin-top:0;margin-bottom:0;" so:

.jqGSContainer .jqGSImgContainer ul,.jqGSContainer .jqGSImgContainer li{padding:0;margin:0;position:relative;}

becomes:

.jqGSContainer .jqGSImgContainer ul,.jqGSContainer .jqGSImgContainer li{padding:0;margin:0;position:relative;margin-top:0;margin-bottom:0;}

Thanks to Georg over at http://blog.gkaindl.com/2007/0.....annoyance/. I have actually never ran into this issue before.

@tsukiyo: Thanks for the suggestion, that is what I was getting ready to suggest, but since I hate to have to "really" hack for any browser, I had to research and find.

@All: make sure to post the url to the site/page that you are using the gallery on. I need the ego boost :)

sorry code can't be posted maybe this way juste delete 'code'
place your new style

I had the same problem in ie6 (don't have Ie7) and I just change made a condition in the style

.jqGSContainer .jqGSImgContainer{}
.jqGSContainer .jqGSImgContainer ul,.jqGSContainer .jqGSImgContainer li{
padding:0px;
margin-bottom:-3px;
position:relative;}

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