Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

benjaminsterling.com

October 2, 2007

jQuery: jqGalViewII (Photo Gallery)

by Benjamin Sterling in Flash Alternatives, Javascript, Photogallery, jQuery, jQuery Plugin on October 2, 2007 @ 11:31 pm

This is the jQuery Gallery View II plugin (jqGalViewII) which takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

The Head

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  2. <script type="text/javascript" src="common/js/jqGalViewII.pack.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.     $('#demo').jqGalViewII();
  6. });
  7. </script>

PLAIN TEXT
HTML:
  1. <style type="text/css" media="screen">
  2. <!--
  3. @import url("common/css/jqGalViewII.css");
  4. -->
  5. </style>

The Body

PLAIN TEXT
HTML:
  1. <ul title="My Gallery">
  2.     <li><a href="http://lh6.google.com/sterling.benjamin/RuyW_7tKn8I/AAAAAAAAAVc/opzOXldgJ0Y/DSC_0001.JPG?imgmax=800"><img src="http://lh6.google.com/sterling.benjamin/RuyW_7tKn8I/AAAAAAAAAVc/opzOXldgJ0Y/s72/DSC_0001.JPG" alt="Yes, I do know what I am doing!" width="72" height="48" border="0"/></a></li>
  3.     <li><a href="http://lh5.google.com/sterling.benjamin/RuyYPrtKn9I/AAAAAAAAAWE/Y1kITpSTFXI/DSC_0025.JPG?imgmax=800"><img src="http://lh5.google.com/sterling.benjamin/RuyYPrtKn9I/AAAAAAAAAWE/Y1kITpSTFXI/s72/DSC_0025.JPG" alt="Hey, it is better then reversible diapers!" width="72" height="48" border="0"/></a></li>
  4.     <li><a href="http://lh4.google.com/sterling.benjamin/RuyZObtKoAI/AAAAAAAAAWc/dDMbJK0jSlw/DSC_0004.JPG?imgmax=800"><img src="http://lh4.google.com/sterling.benjamin/RuyZObtKoAI/AAAAAAAAAWc/dDMbJK0jSlw/s72/DSC_0004.JPG" border="0"/></a></li>
  5.     <li><a href="http://lh6.google.com/sterling.benjamin/RuyZa7tKoBI/AAAAAAAAAWo/dmnMNJS2nPI/DSC_0005.JPG?imgmax=800"><img src="http://lh6.google.com/sterling.benjamin/RuyZa7tKoBI/AAAAAAAAAWo/dmnMNJS2nPI/s72/DSC_0005.JPG" border="0"/></a></li>
  6.     <li><a href="http://lh3.google.com/sterling.benjamin/RuyZnLtKoCI/AAAAAAAAAWw/1TD-_nNT8PA/DSC_0006.JPG?imgmax=800"><img src="http://lh3.google.com/sterling.benjamin/RuyZnLtKoCI/AAAAAAAAAWw/1TD-_nNT8PA/s72/DSC_0006.JPG" width="72" height="48" border="0"/></a></li>
  7. </ul>

And that would produce the following:

  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?
  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • What way is this supposed to go?
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?

The Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....II.1.0.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.



Tags: , , , , , , ,

121 Responses to “jQuery: jqGalViewII (Photo Gallery)”

Ben,

The links to jqGalViewII.(js|css) are both pointed to the old jqGalView code (which has in the comments references to being version 2.0.1)

Additionally, looking at the page source and downloading the version with $.jqGalViewII -- the .js still has commentary showing version 0.5.

Just an FYI. Getting ready to test this out.

October 4th, 2007 at 4:44 pm | Link

Craig,
Good catch, guess that is what I get for taking a short cut.

As for the version number, this is only the beta release there are more features being planned.

If there are any suggestion for features, feel free to suggest away.

October 4th, 2007 at 5:16 pm | Link

[...] current layout as is or hook in another plugin like the jqGalView Plugin, the jqGalScroll Plugin, the jqGalViewII Plugin or the jqShuffle Plugin to create your photo gallery on the fly and with very little coding on your [...]

October 10th, 2007 at 10:00 pm | Link

Hi Benjamin,

Great work ;) Works like a charm.

It would be great if you could display the title or alt text when hovering over either the thumbnail or the main image.

October 20th, 2007 at 10:58 pm | Link

DragonI,

Thanks for the kind words.

I am/was actually working working on that feature, just having trouble making it flexible and easy to style. I am hoping to have a change up in the coming weeks, but sadly can not guarantee it.

October 20th, 2007 at 11:24 pm | Link

Hi Benjamin,

Hey, that's OK. I wasn't expecting it tomorrow like silly Biz folks!!!

Thanks for your time though.

October 21st, 2007 at 12:42 pm | Link

Benjamin,

I can't get this to work in WordPress. I'm using v. 2.2, as I haven't made the 2.3 jump yet. I have read in other places that jQuery doesn't play nice with WP because it uses the Prototype library. Any thoughts on what the problem might be? I am following the example above, and as it is pretty simple I don't think I've got anything set up differently. Any help you could provide would be appreciated. Thanks!

October 29th, 2007 at 12:05 am | Link

Mike,
I just upgraded from 2.2 and was not having any issue, but then again, I did not have prototype in my theme.

I do have a few questions:
1. What exactly is the problem?
2. Is there a JavaScript error?
3. Is there a url I can have a look at?
4. Also, I am not using the rich text editor when inputing my code, it always screws up the script tags, is this the problem you are having? If you view source and look for your script tags, you will be able to see what I am talking about.

October 29th, 2007 at 3:34 pm | Link

The problem varies depending on what type of page the gallery is on. When I have it on the main index page (in the loop or in the sidebar), the gallery comes up but won't display the main image. I see all of the little thumbnails, but nothing happens when I click on them and no image comes up in the viewing area by default.

On a page, it doesn't do anything to the list at all. It just shows the images as li items. I don't get the loading bar or anything. Just a blank black space.

I am having these problems on a mockup of a site I intend to launch. You can see the main page here:
http://fsbo.wittmania.com/

and a sub-page here:
http://fsbo.wittmania.com/altphotos/

I am not getting any error messages, and I am using the code editor b/c the visual editor is crap! You can look at the source code to see how I am calling the function. I don't use Prototype in my theme, but I read somewhere that b/c it is bundled with WordPress you have to call jQuery functions using "jQuery" instead of the dollar signs. See the article here: http://incoherentbabble.com/20.....wordpress/ Not sure if that's what's going on here. I do have one other minor jQuery script running, and it is running fine w/o the jQuery-instead-of-$ fix.

Thanks for your help, as this plugin is exactly what I'm looking for, since I need a narrow image browser that will also let me show a ton of pictures in a small, scrollable space.

One feature request, while I'm at it... it would be nice to have next/previous navigation buttons floating somewhere up in the main viewing area. This would allow people to rapidly click through the images rather than having to click on each one individually. Not sure how tough it would be to implement, but I think it would be a nice feature.

By the way, feel free to email me if you want so I don't monopolize your comments area with my problems. I'd also like to buy you a beer if we can get this thing working. Thanks!!!

October 29th, 2007 at 5:37 pm | Link

Rather than fill up your comments section, please email me and I will go over the details of the issues I'm having with the plugin. mike /at/ wittmania /dot/ com. Once we get this baby working, I'll buy you a beer!

Thanks,
Mike

October 29th, 2007 at 5:49 pm | Link

Hi there

I think you have made a lovely little gallery and I'm trying to implement it here:

http://www.electricelephant.co.....ery_01.htm

But for some reason, the thumbnails are cropping the top left of each image rather than being a thumbnail of the whole picture. Do you have an ideas where I could be going wrong please? They only change I've made to what you posted is wrap the whole thing in a span so it didn't interfere with the other ul's on my page, put my own pictures in and transfer your css to my master css file.

I was thinking that it would be nice to style up the vertical scrollbar too at some point - where could I do this please?

Thanks

Cath

November 6th, 2007 at 9:16 am | Link

Cath,
Thanks for the kind words, it looks like those small images you have are not actually thumbnails. The best course of action is to make a thumbnail of each image and then do something like below:

PLAIN TEXT
HTML:
  2.     <li><a href="_img/gallery/1.jpg" rel="nofollow"><imgsrc="_img/gallery/1_thumbnail.jpg" alt="Flowers!"/></a></li>
  3.     <li><a href="_img/gallery/10.jpg" rel="nofollow"><img src="_img/gallery/10_thumbnail.jpg" alt="Flowers!"/></a></li>
  4. </ul>

As for a scrollbar styling, I thought about building something like that in, but did not want to deal with bloat. There is another jQuery plugin you can check out called jScrollPane at http://kelvinluck.com/assets/j.....lPane.html

Please let me know if I did not make sense and I will try to rephrase it.

November 6th, 2007 at 10:09 am | Link

Hi there

Thanks for replying. I just realised that I had actually made another crucial change to your original code and that was to remove the width and height you had used to create your thumbnails by resizing the original image. I now feel torn as to which method to use as generating a load of thumbnails is hassle, but I'd rather not apply styling directly to my html :S

Thanks very much for the jScrollPane link - I'll let you know if I figure out how to integrate it without adding too much weight.

Cheers

Cath :)

November 6th, 2007 at 12:44 pm | Link

Cath,
You can get away with doing:

[code lang="css"]
.gvIIContainer .gvIIHolder .gvIIItem img {
cursor:pointer;
height:40px;
left:0pt;
margin:0pt;
padding:0pt;
position:absolute;
top:0pt;
width:40px;
}
[/code]

And that will force the images into the size, I would suggest that you make sure your images are not huge, otherwise load time can be a factor.

November 7th, 2007 at 12:06 am | Link

Hi Benjamin

Lovely, thanks again for your help. I am nearly there now:

http://www.electricelephant.co.....ery_01.htm

I just have to add captions/tooltips to some of the pictures.

It works perfectly in Firefox, but I have noticed a strange bug in IE7 where if I am on the gallery page, then click away to another page, then click back onto the gallery page, no main image loads. I need to refresh the page for this to happen. Do you have any ideas on how this could be solved please?

Thanks again for your help - really appreciated

Cath :)

November 8th, 2007 at 12:00 pm | Link

Cath,
That's an interesting one, and it looks like it is because of the onload part. I am assuming since the images are already loaded into the cache that ie7 does not execute the onload again. Let me see what I can do, I may not be able to get to it today though. You can try this tho:

PLAIN TEXT
CODE:
  1. $(document).load(function(){
  2.      $('#gvIIID0 img').click();
  3. });

The id "gvIIID0" will always be the first image container and the above is triggering the click event for the time that is inside the container. You will put that code in the head of you document and when the page is finished loading, the click event will be triggered.

This is just/should be a quick fix, and I will try to fix it in my next release. let me know if that works.

November 8th, 2007 at 12:25 pm | Link

Hi Benjamin

I have tried what you suggested, but it doesn't seem to be working. Here is my header at present:

********************************

Vanilla Rose :: a fresh approach to flower design

$(document).ready(function(){
$('span.gallery').jqGalViewII();
});

$(document).load(function(){
$(’#gvIIID0 img’).click();
});

*********************************************

Did I put the script you provided in the right place and in the right way? Sorry, this is only the 3rd day I've ever spent doing any JQuery/Javascript so I am a little slow!

Thanks

Cath

November 8th, 2007 at 1:43 pm | Link

Weird - this editor has stripped out the tags.. Please have a look at the page source on the site instead if you can spare the time - thanks.

November 8th, 2007 at 3:45 pm | Link

Cath,
Yeah, I am using a plugin to help with formating and it messed things up with the comments. Yet another thing I need to fix :(.

Try putting:

$(document).load(function(){
$(’#gvIIID0 img’).click();
});

In your .ready statement and see if that does. Can't really test it myself right now, but that "should" work.

November 8th, 2007 at 3:50 pm | Link

Benjamin,
Thanks a lot for the great script. I have been able to get it up and running using Firefox (v. 2.0.0.9) but I am having the same problem as Cath with Internet Explorer (version 6). It loads fine the first time but if I click on another page on my site and then come back to the gallery page the main image doesn't load. Also, in IE I get a thin black border around the entire gallery but in Firefox this doesn't show up.
Thoughts?
Kris

November 13th, 2007 at 12:56 am | Link

Scratch the border problem... I think I just messed something up in the CSS because it's gone now...

November 13th, 2007 at 1:03 am | Link

Cath/Kris/Mike,
Thanks for the patience. I finally figured out what was going wrong, I wish I could explain the problem, but I know my limitations.

Please download the updated js file and let me know how that works out for you. And by all mean, post up your urls so I can build up my ego :).

November 13th, 2007 at 10:37 pm | Link

Ben, thanks for the update! It works well now in IE7/6. BTW, if you want to see it in action you can head over to http://fsbo.wittmania.com to see the "dummy" site I've got it running on. One thing you'll see is that it displays on the front page, but I used a separate jQuery script to show the full sized images from the list instead of the thumbnails. Yeah, I know I could have put the list together and called the plugin differently, but this way works really well with the default WordPress upload/send to editor functionality. Anyway, it works even if it isn't the most elegant way to do it!

Thanks again!

November 13th, 2007 at 11:07 pm | Link

Mike, that site is look real nice. Good job!

November 14th, 2007 at 11:56 am | Link

Hi Benjamin

I've put the gallery live here: http://www.vanillarose.co.uk/gallery.htm and it's working perfectly :)

I've had to fudge one thing though (after trying many different alternatives - none of which worked!) and that's to display some text at the same time as an image. I got around it by putting text directly onto some of the jpgs, but it would be great to display a caption for each within the code. do you reckon this is remotely possible? I have tried putting in tags everywhere within the s, but to no avail..

Cheers

Cath

November 26th, 2007 at 1:22 pm | Link

Cath,
That is looking great, very impressive and clean.

You can using your alt attributes and do something like(untested):

PLAIN TEXT
JavaScript:
  1. // after el.loader = $('<div class="gvIILoader"/>').appendTo(el.mainImgContainer); put:
  2. el.altTextBox = $('<div class="gvIIAltText"/>').appendTo(el.mainImgContainer);
  3.  
  4. // change el.loader.fadeOut('fast',function(){el.image.fadeIn();}); to:
  5. el.loader.fadeOut('fast',function(){
  6.      el.image.fadeIn();
  7.      el.altTextBox.text(img.altTxt).fadeIn();
  8. });

You will need to add styles for .gvIIAltText but that should do it.

November 26th, 2007 at 10:25 pm | Link

Hi,
thanks for this pretty gallery. Very nice, and simple to plugin to my page:) ...I saw that someone else asked about displaying title or alt when hovering over the image - maybe this is a related question: I'm using your gallery to make a display of photos on a clothes designers website. The photos to display, have to be credited, but are by different photographers.

My question is this, do you think it's possible to change an accompanying text (taken from the title?) with the changing of each photo? ...Is this a functionality you'd consider adding anyway, or do you go only for more simple functionality?

:) johan

November 27th, 2007 at 8:12 pm | Link

Johan,
Thanks for the nice words.

Yes, something like that is in the works, sadly it has just been too busy to get to any of my plugins.

If I am understanding you correctly, you can do what I posted in comment 156. I have not been able to test it, but there is no reason for it not to work.

Now, if you are talking about a "tooltip" type of thing when you mouse over the thumbnail, that also is on my "nice to get done" list, but I have not put any thought into it. But you can do something like:

PLAIN TEXT
JavaScript:
  1. //about line 121
  2. // after $('<div class="gvIIFlash">').appendTo($div).css({opacity:".01"})
  3. $('<div class="gvIITEXT">').appendTo($div).text($image.attr('alt')).mouseover(function(){
  4. // put code to make a tooltip
  5. });

That is untested, but should point you in the right direction.

Can you let me know if you try and and if you get it to work?

November 27th, 2007 at 9:14 pm | Link

Hi Benjamin

Thanks very much for getting back to me - you've been incredibly helpful :)

I tried what you suggested with the alt tag code on another site I am implementing your gallery, see here for work in progress:

http://www.riverbankdesign.co......ion_01.htm

and it works fine in IE7, but in Firefox, it's pushing everything over to the right - do you have any ideas please? (There is some ropey CSS in here actually - I made the site originally quite a while ago, when I didn't know what I was doing as much!)

thanks

Cath

November 28th, 2007 at 4:19 am | Link

@cath: you have a float issue going on, put this in one of your style sheets:

PLAIN TEXT
CSS:
  1. .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
  2. .clearfix {display: inline-block;}
  3. html[xmlns] .clearfix {display: block;}
  4. * html .clearfix {height: 1%;}

add the clearfix class to your nav div

PLAIN TEXT
HTML:
  1. <div class="nav clearfix">

And that should fix that.

November 28th, 2007 at 9:57 am | Link

Sterling work Mr. Sterling - that worked a treat :)

I'll post up a url when I've finished it.

Cath

p.s. where's your tip jar?!

December 3rd, 2007 at 8:01 am | Link

oops - i was checking in the wrong browser - still not working in FF - I'll see if I can figure it out..

December 3rd, 2007 at 8:03 am | Link

aha! I fixed it by putting a clear: left in the bodyillus div tag. :D

December 3rd, 2007 at 8:11 am | Link

Cath,
I am glad it is working for you, make sure to post a link to the final product, I am working on a "Whose using my plugins" page.

pssst. tip jar is in the right column :D

December 4th, 2007 at 1:42 am | Link

One more tip for anyone who wanders into this discussion...

You can replace the loading graphic to fit better with your theme using this loading gif generator:

http://www.ajaxload.info/

You can put in the color, and the type of graphic and it will generate it automatically. Makes it real easy to update the loading graphic when somebody, ahem, updates their theme.

December 4th, 2007 at 7:21 pm | Link

@Mike: good tip, I think that is where I got my loader in the first place. Thanks.

December 4th, 2007 at 8:50 pm | Link

I'm using the gallery within the accordian nav. The problem is that if the accordian nav which holds the gallery isn't activated by default then the first image in the gallery doesn't load. I want the default behavior of the nav to have all nav items collapsed.

Can you think of any way around this?

Thanks,
Bill

December 6th, 2007 at 5:05 pm | Link

Bill, can you post a url to what you have so far, I can't think of a solution off the top of my head with out seeing what you have.

December 6th, 2007 at 5:17 pm | Link

It's behind a firewall, but I can email you the source files if you'd like.

December 6th, 2007 at 5:29 pm | Link

Sure, its benjamin.sterling [at] kenzomedia [dot] com, just replace the [at] and the [dot].

December 6th, 2007 at 5:35 pm | Link

Hello Benjamin,

I'm not clear on your sample

PLAIN TEXT
CODE:
  1. HTML:
  2.  
  3.    1.

Do the images placed in the div not need to also be links?

December 8th, 2007 at 2:45 pm | Link

@Anna: Yes and no, but let me explain. I never got around to posting good instructions for this plugin, so it is understandable if you don't understand.

If you want to be able to just do $('ul').jqGalViewII();, then yes, the images need to be wrapped in a link and the plugin will get the larger images URL from that link.

If you want to be able to create a folder structure that has all you large images in one, we'll call it "large" and all your thumbnails images in the other, we'll call the "small," then the answer is no you don't need to wrap the images in a A tag, but you will need to something like below:

PLAIN TEXT
JavaScript:
  1. $('#gallery').jqGalViewII({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});

The above code will take your thumbnail image, which will be the same name as the large size image, and just change the page to match "fullSizePath." So if I have "images/tn/myImage.jpg" and you set the "fullSizePath" to "image/full" the plugin will build a path "image/full/myImage.jpg."

My goal this holiday season was to update all my docs, but work has been much busier than in recent years. I will try to get this updated to help you out better. But feel free to post anymore questions.

December 8th, 2007 at 6:26 pm | Link

Hello Benjamin,

Thank you for your quick response - and I really don't find your documentation lacking, I simply implemented this method wrong when first trying it. :(

When I got a clue and added a trailing slash to 'fullPath/to/fullsize/folder', all worked wonderfully.

This plugin is much appreciated, Benjamin. Thank you:)

December 9th, 2007 at 1:45 am | Link

Anna,
I am glad you are finding it useful.

December 9th, 2007 at 12:54 pm | Link

Hi Benjamin,

I'm trying your jqGalViewII and it perfectly works on my project. Thank to share it.
Just ...

How can I display a title and a legend with each large images ? Is there a way to do this in your plug-in ?

Thank again

December 12th, 2007 at 4:19 pm | Link

Samti, Glad you are liking the plugin, not sure what you mean by "legend" but take a look at comment 156, I posted code there to get a title up and running. I am hoping to have time in the coming month to implement it myself, but don't know when exactly.

Can you elaborate a bit on what you mean by "legend?"

December 12th, 2007 at 11:05 pm | Link

I wanted to use alt attribute for a small texte that comment the image and title attribute for the title.

I solve this that way : (see #comment-156 above)

PLAIN TEXT
PHP: