jQuery: jqGalScroll v2.1 (Photo Gallery)

September 9, 2007

jQuery: jqGalScroll v2.1 (Photo Gallery)

by Benjamin Sterling in Flash Alternatives, Javascript, Photogallery, jQuery, jQuery Plugin on September 9, 2007 @ 11:36 pm

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

PLAIN TEXT

JavaScript:

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

PLAIN TEXT

CSS:

<style>
@import url("common/css/jqGalScroll.css");
</style>

The Body

PLAIN TEXT

HTML:

<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.

PLAIN TEXT

JavaScript:

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:

http://www.ryanbrenizer.com/wedding_portrait

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.

Tags: css, image gallery, Javascript, jqgalscroll, jQuery, photo gallery, Photogallery, Plugin, plugins, slideshow

Pages: « 14 … 12 11 10 9 8 [7] 6 5 4 3 2 … 1 » Show All

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

1. Benjamin Sterling

koesbong: I working on getting your version into my WP plugin PhotoXhibit
February 28th, 2008 at 5:09 pm | Link

2. koesbong

Hey Ross,

As mentioned by Ben, feel free to take a look at the gallery I've created based on Ben's jgGalScroll. Feel free to email me if you have any questions on that as well. my email is my name stated above at gmail.com
February 28th, 2008 at 4:55 pm | Link

3. Benjamin Sterling

It did, I have not had time to post the code yet, I can send you what koesbong did (http://www.ryanbrenizer.com/).
February 28th, 2008 at 4:48 pm | Link

4. Ross

Did the left to right issue ever get fixed? The images won't stack up left to right for me.
February 28th, 2008 at 4:38 pm | Link

5. Benjamin Sterling

David, do take koesbong on his offer, he made some really nice additions to the code that I am looking to add as soon as things die down for me.

koesbong: a huge hat tip to you for your work, I do appreciate it.
February 17th, 2008 at 11:27 pm | Link

6. Benjamin Sterling

David, change line 13 from "filter" to "find" and see if that works.
February 17th, 2008 at 11:22 pm | Link

7. koesbong

Hey David,

I had this problem before. try this:

Try changing:

el.pagination.filter('.selected').removeClass('selected');

to

el.pagination.find('.selected').removeClass('selected');

i can email you my modified version of jqGalScroll if you'd like. my email is my name stated above at gmail.com
February 17th, 2008 at 11:10 pm | Link

8. David

Hello Benjamin,

I try to make the links selected, but I can't.
Once a link is clicked, the older selected link stays selected...

I took a look at your older script : http://benjaminsterling.com/ex.....lScroll.js
and the lines :

PLAIN TEXT

CODE:

var $ul = $('');

for(var i = 0; i <$children.size(); i++){

var selected = '';

if(i == 0) selected = 'selected';

var $a = $('<a href="#'+(i)+'" rel="nofollow">'+(i+1)+'</a>').css({opacity:.70});

$ul.append($a);

};

$jqgsPagination.append($ul)

var $jqgsPaginationLinks = $jqgsPagination.find('a').click(function(){

var href = this.href.replace(/^.*#/, '');

$jqgsPaginationLinks.filter('.selected').removeClass('selected');

$(this).addClass('selected');

$parent.animate({marginTop:-($children.height()*href)},o.speed, o.ease);

$.fn.jqGalScroll.getTitle($children[href],$jqgstitle);

index = href;

});

but I dont know what to change in your last script (i'm not good in javascript...)

Thanks for your help

David
February 16th, 2008 at 1:11 pm | Link

9. LongWay's Blog » Blog Archive ???jQuery??

[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs - easily create [...]
February 13th, 2008 at 1:38 am | Link

10. 5 Diashows für jQuery

[...] jqGalScroll 2.0 (Photo Gallery) Diese Bildergalerie von Benjamin Sterling scrollt ebenfalls, diesmal aber vertikal. [...]
February 7th, 2008 at 8:53 am | Link

Pages: « 14 … 12 11 10 9 8 [7] 6 5 4 3 2 … 1 » Show All

benjaminsterling.com

September 9, 2007