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

October 2, 2007

121 Comments

jQuery: jqGalViewII (Photo Gallery)

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

  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>
  1. <style type="text/css" media="screen">
  2. <!--
  3. @import url("common/css/jqGalViewII.css");
  4. -->
  5. </style>

The Body

  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.



back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

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.

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.

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.

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.

Hi Benjamin,

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

Thanks for your time though.

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!

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.

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

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

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

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:

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

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

Cath,
You can get away with doing:

  1. .gvIIContainer .gvIIHolder .gvIIItem img {
  2.      cursor:pointer;
  3.      height:40px;
  4.      left:0pt;
  5.      margin:0pt;
  6.      padding:0pt;
  7.      position:absolute;
  8.      top:0pt;
  9.      width:40px;
  10. }

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.

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

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:

  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.

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

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.

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.

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

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

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

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!

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

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

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

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

  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.

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

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:

  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?

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

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

  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

  1. <div class="nav clearfix">

And that should fix that.

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

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

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

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

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.

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

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

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.

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

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

Hello Benjamin,

I’m not clear on your sample

  1. HTML:
  2.  
  3.    1.

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

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

  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.

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

Anna,
I am glad you are finding it useful.

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

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

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)

  1. // after el.loader = $('').appendTo(el.mainImgContainer); put:
  2.       el.titleTextBox = $('').appendTo(el.mainImgContainer);
  3.       el.altTextBox = $('').appendTo(el.mainImgContainer);
  4.  
  5.       // change el.loader.fadeOut('fast',function(){el.image.fadeIn();}); to:
  6.       el.loader.fadeOut('fast',function(){
  7.            el.image.fadeIn();
  8.            el.titleTextBox.text(img.title).fadeIn();
  9.            el.altTextBox.text(img.altTxt).fadeIn();
  10.       });

Hope this could help.

Hello,
Very nice plugin, but I think there is a little bug in jqGalViewII.js:
178: if ($h > wContainer) {
and the correct code is:
178: if ($h > hContainer) {

Thanks Ponger, I will have to take a look at that; you could be right, that whole logic never made me comfortable.

@Sam Ti, Can you post your other comments here? I will post a reply a little later today after I had a change to look at things.

Hello,

I am working on a new product page for our site and am using your amazing plug in to add the ability of multiple images. I have a few questions though, Is there a way to make it so if you click on the large version of the image, it opens a larger version in Thickbox. Also our images are name image_small.jpg,image.jpg image_large.jpg I was wondering if there is any way to get this to work with the prefix setting in your code.

PS: To thank you for this great plug in my company will be sending a donation.

Robert:
First off, thank you very much for the donation, I truly appreciate it.

if you have your thumbnails as being image_small.jpg and image.jpg is the large image you want to show and image_large.jpg is the thickbox image, which I am assuming is the case, you can do something like this:

  1. $('#gallery').jqGalViewII({getUrlBy:2, prefix:'_small'});

That will replace the _small and return image.jpg.

Now to get the larger to open in thickbox, this is untested, add the follow at about line 198, after fadeOut function:

  1. el.image.unbind('click').click(function(){
  2.     var src = $(this).attr('src').slit('.');
  3.     var newsrc = src[0] + '_large.' + src[1];
  4.     alert(newsrc); // just for testing
  5.     // thickbox execution code
  6. });

Try that out and let me know if that works out for you.

hey,

I’m trying out your layout. It’s exactly what I need but I can’t for the life of me figure out how to implement this. Are there extra instructions I’m missing. I’m trying to get to work here: http://www.sthig.com/delaine but nothing is coming out right. I’m sure I’m missing a step somewhere. Can you help me out what I’m supposed to do?

thanks!
Scott

ps-this looks AWESOME and I’d love to use it!

Scott:
Thanks for the kind words.

Two things, you show reverse the order of your script tags, put the jquery-1.2.1.pack.js before the jqGalViewII.js and remove the script tag just before the UL. And that should put you in the right place.

ah. awesome! that worked!

one other question. Is there anyway to have the thumbnails go vertical next to the main image instead of horizontal?

Unfortunately I have not been able to get either issues working. Whenever I add the code to automatically remove the .thumb from the src the page just loads with a broken image link. Also the Thickbox code is not doing anything. Any ideas? My test site is located here: http://media.primetimesolutions.net/staging/

@Robert:
There was a error in the code, change line 112 of your jquery.galview2.js file to:

  1. this.altImg = this.src.replace(el.opts.prefix,'');

@Scott: Take a look at http://junktrunk.com/, he did a real nice job with the layout. That may help you.

Nice, that fixed the image issue, any clue regarding the Thickbox code?

Looked more into it and it looks like split was misspelled, once i renamed it to split from slit it started alerting me with the address. Unfortunately the address isn’t correct. Also is this code supposed to trigger the Thickbox or just call the URL.

Thanks

Hello Again,

Sorry for posting so much, I think I have figured it out, I altered the line you gave me from:

  1. var newsrc = src[0] + '_large.' + src[1];

to:

  1. var newsrc = src[0] + src[1] + src[2] + '.large.' + src[3];

The URL seems to be displaying correctly now. I am not sure if this is the correct way of doing it, but it worked for now. Now I just need to get it to load in Thickbox, is this something you would know or should i check the Thickbox forums.

Thanks and sorry for bothering you so much.

hey thanks for your help again (man, you’re quick).

okay I sort of “have it” but there are a few things.

1. I can’t get the thumbnails to float left of the img. I looked in the js and I think it has something to do with the being before the I tried swapping them in the js but that didn’t work.

2. I have divs set up on my site already, anyway I can put the thumbnails on one and the image in another ?

Well I pretty much got it, here is the code:

  1. el.image.unbind('click').click(function(){
  2.      var src = $(this).attr('src').split('.');
  3.      var newsrc = src[0] + '.' + src[1] + '.' + src[2] + '.large.' + src[3];
  4.      tb_show('Hello', newsrc); // This calls Thickbox
  5. });

Any idea on how to make the newsrc work correctly, or any shorter that what i had to use. Also what is “?imgmax=800″ and do i need it.

Thanks

ah ha, I got it with a bit more trial and error. But I can’t get the img to not be centered in the middle and go to the top. Any idea how to get this to work?

also, I can’t seem to get all that space between the thumbs and the picture. what is causing so much space?

Robert: That is looking real nice. The reason I used the period to split was I was going with the assumption that you were going to do something like image_small.jpg or something to that effect.

The ?imgmax=800 is to fix issues when bringing in an image from Picasa. So, no, you don’t need it.

scott: the image is centered in the ‘.gvIIImgContainer’ div. So if you have it set to 500 x 500 and your image is 400 x 400 it will be centered by default and this is done in the code. I would suggest that you change the width and it will adjust accordingly.

I was originally going to use the _small, but I liked the way you did it better with the .small so i will be using that instead.

ah. thank you very much. I got it.

I may get this by the time you respond (that is if I’ve not driven your crazy already!) but I’m still having trouble with the icons lining up horizontally with the image.

okay I can get: gvIIHolder to line up against the div I’d like it in. but I can’t get gvIIImgContainer to play nice. The only way I can get them side by side is to float the thumbs left and the image right…and it does work but then it puts this big giant gaping gutter inbetween them.

I’m not a css master, so I’m probably just missing a simple string of code to put in. But I’ve been hammering at this for hours and can’t get it. I did finally have it once but then it didn’t work in IE6 (the thumbs wouldn’t display).

Any chance you can help me close that gab inbetween the thumbs (to the left) and the image (flush next to it).

thanks man, I really appreciate your time! It’s awesome at what it does, it’s just styling it which has been a challenge!

ah, I got it. nevermind. little tricky, but I got it (my main concern was getting it to work in ie6) but now I have a NEW question.

I want to make an unordered list of links on this site too. I’m only assuming another UL will trigger the javascript. Is there anyway to make it specify a certain UL? If not I’m assuming I’ll have to do it the other method and if that’s so, is there somewhere here on the page (or in the js) that talks about what code to put in.

Thanks for putting up with me. If I can get this to work for my site, I’ll make sure donations are in order!

actually I spoke too soon again. I got it! Great stuff, working like a charm now!

Hello,

I was wondering if you could help me, it appears your plugin and another jquery plugin im using called tabs are not playing nice together. I was wondering if you could take a look at it.

http://media.primetimesolution...../tabs.html

Thanks

Robert,
Give the gallery UL a an ID and then change the selector call, eg.

  1. <ul id="gallery">
  2.     <li><img src="http://media.primetimesolutions.net/products/SPONGE5-MC12/images/SPONGE5-MC12.thumb.jpg" alt="Microfiber Sponge" border="0"/></li>
  1. $('#gallery').jqGalViewII({getUrlBy:2, prefix:'.thumb'});

Thanks so much, that fixed it.

Hi Benjamin
You’ve done some great work with jQuery. I have a problem with this gallery though. It does not show an image when I embed the gallery in a Spry collapseable panel. See http://linux.webme.co.uk/catash/.
There is a folding panel halfway down with your gallery in it, however the first image is not displayed by default.
Any ideas?
Thanks in advance.

Someone had a similar problem when dealing with the accordion and seems to have something to do with display:none: in those plugins. The fix I suggested and what seemed to work was this:

  1. $('#CollapsiblePanel2 .CollapsiblePanelContent')
  2. .change(function(){
  3.     $('#gvIIID0 img').click();
  4. });

Let me know if that works.

Hi Benjamin

Thanks for the lightning quick response. I have tried that but to no avail. Any other ideas?
Thanks again.

JB: Try:

  1. $('#CollapsiblePanel2')
  2. .click(function(){
  3.     $('#gvIIID0 img').click();
  4. });

I just ran that against your site and it seems to work, let me know if that is the case?

Really weird, as you can see i’ve added what you suggested but still no joy.

Managed to fix this by making the panel display open by default thus not creating the gallery in a div with the display style set to none. Thanks for your help.

Thank you! This is great.

I had an idea that for small galleries it would be nice to generate thumbnails on the fly from a list of full-size images. I’ve been working on integrating easyThumb with your gallery but I haven’t quite figured out how to do it yet.

Do you think this is possible? Is there a way to force jqGalViewII to wait until the thumbnail code is generated?

Huh, I just realized it would easier to make the thumbnails with css:

  1. .gvIIItem img { width:50px; height: 50px; }

All I need to do is make sure the fulll-size images have the same heights & widths. Hindsight is 20-20!

Is there a way to make the thumb images postion beside the big selected phot instead at the bottom?

Swazi: yes, you will just need to play with css files. Give it a try and if you run into any issues drop me a line.

Hi Benjamin,

great job indeed !

I tried to take out some hints from your work:

suppose you have a page in which there are many links (thumbnails or other stuff) to images. When one of those link is clicked the src attr of the big image is set to get it displayed CENTERED in a div.
The first issue to solve was to clearly get when the image has fully loaded.
Mozilla always triggers a “load” event, but IE doesn’t if the image is in the cache yet. So, to test img.complete, I have first to wipe out the image from the DOM and then reinsert it and set its src attr.
Another approach could be to install a listener on the image (I found some clues searching the web).
Both of them work meaning that I have a trigger when the image if loaded.

At that point the simple part would come, but…
before to do a $(….).show(‘slow’…. I tried to get image width and height (the height is the problem, to center horizontally CSS margin: auto suffices !) using, like in your code, height property.

In mozilla it works perfectly but in IE it got always 0 for the height.

I solved assigning the image to the background of the div, but this seems a workaround rather than a solution.

Can you please help, suggesting other approacches also ?

Here some code:

  1. jQuery(document).ready(function() {
  2.         $('').appendTo('#imgBig').hide();
  3.         $('').appendTo('#tit').hide();
  4.  
  5.         var imgContainer = $("#big");
  6.         var immage = $("#big img");
  7.  
  8.      function addEvent(obj, ev, fn) {
  9.      if (obj.addEventListener) {
  10.      obj.addEventListener(ev, fn, false);
  11.      } else if (obj.attachEvent) {
  12.      obj.attachEvent('on' + ev, fn);
  13.      }
  14.      }
  15.  
  16.      function imgLoad(e) {
  17.      if (!e) var e = window.event;
  18.      // note: I don't know which is correct, but moz reports e.target as being the document and e.currentTarget as the image
  19.      // opera says both e.target and e.currentTarget are the img - which is what I would've expected...
  20.      // IE doesn't have the concept of a currentTarget, but srcElement (it's version of target) points at the img element
  21.      var target = e.currentTarget || e.srcElement;
  22.  
  23.      //alert('Loaded:' + target.height + ' '+immage.get(0).height);
  24.      imgContainer.css({'top': (550 - immage[0].height)/2+'px','left': (560 - immage[0].width)/2 + 'px'})
  25.                       .show(1500,function() {
  26.                          $("#titolo").fadeIn('slow');
  27.                     });
  28.      }
  29.  
  30.      addEvent(immage[0], 'load', imgLoad);
  31.  
  32.         immage.attr("src", './imgstore/coperta.jpg');
  33.         imgContainer.show(800);
  34.  
  35.         $("#links-container img").click(function() {
  36.           var ll = $(this).parent().attr("href");
  37.           $("#titolo").text($(this).attr("title")).hide();
  38.  
  39.           imgContainer.hide(800, function() {
  40.                  immage.attr("src", ll);
  41.           });
  42.           return false
  43.         }); //click
  44.  
  45.      });

or wiping out and in the img from the DOM:

  1. jQuery(document).ready(function() {
  2.         $('').appendTo('#imgBig').hide();
  3.         $('').appendTo('#tit').hide();
  4.  
  5.         var imgContainer = $("#big");
  6.         var immage = $("#big img");
  7.  
  8.         var MostraImg = function() {
  9.         // alert(immage[0].height);
  10.            imgContainer.css({'top': (550 - immage[0].height)/2+'px','left': (560 - immage[0].width)/2 + 'px'})
  11.                  .show(1500,function() {
  12.                     $("#titolo").fadeIn('slow');
  13.                     });
  14.        // alert(immage.height());
  15.  
  16.         }
  17.  
  18.         immage.attr("src", './imgstore/coperta.jpg');
  19.         imgContainer.show(800);
  20.  
  21.         $("#links-container img").click(function() {
  22.           var ll = $(this).parent().attr("href");
  23.           $("#titolo").text($(this).attr("title")).hide();
  24.  
  25.           imgContainer.append('').hide(800, function() {
  26.                immage.remove();
  27.                immage = $("#big img");
  28.            immage.attr("src", ll);
  29.  
  30.            if (immage[0].complete) {
  31.                MostraImg();
  32.               }
  33.              else {
  34.                immage.bind('load',MostraImg);
  35.            }
  36.           });
  37.           return false
  38.         }); //click
  39.  
  40.      });

Thank you in advance and sorry for my bad English (greetings from Italy)

Fernando

@Fernando: sorry for the delay in getting back with you, for some reason you went into spam.

I am not a 100% what you are trying to do, do you have a link to where I can see what you are at now? With that said, the .onload should work in IE even if it is cached, but I could be wrong.

@Colin: http://monc.se/kitchen/146/gal.....ge-gallery

I love your script. However, I am trying to use it using about 100 pictures for the gallery. Trying to preload all those images causes a lot of resources to be used. How can I remove the preload option?

Thanks,
Steven

Steven, I actually meant to put a switch in for that, I can comment out lines 136 to 161:

  1. //start
  2. /*
  3. var largeImage = new Image();
  4.  
  5. //end
  6. largeImage.src = tmpimage.altImg;
  7. */

Hmm, thanks for the quick reply. That seemed to remove too much functionality. On FF2.0 and IE7.0 when I comment out those lines it removes all the large images (when I click the thumbnails nothing happens). My desired result would be to click the thumbnail, bring up a loading icon until the large image loads, then display the large image.

Steven, guess it was too quick of a response, I was not thinking. Remove the following pieces of code:

  1. var largeImage = new Image();
  2. largeImage.onload = function(){
  3.     largeImage.onload = null;

and:

  1. };  // end : largeImage.onload
  2. largeImage.src = tmpimage.altImg;

Hi quick question: i’m using jQuery Gallery Viewer II, love it. However, when viewing an entire category or works by an author, the gallery does not display, it only displays when viewing that specific post. I hope that makes sense, here’s an example: http://somedaymap.com/author/test1 – 2 of those posts have Galleries, but you would not know that unless you clicked on those posts (s u b l i m i s & gallery)

Thanks in advance for any help.

how can i do this function:
forward
next one
to control the picture show

How to delete a picture?

@Adam Looks like you are using the PhotoXhibit plugin, would you mind posting your comment/question at http://benjaminsterling.com/photoxhibit/ and I can explain better what is going on.

@Hermit: as it stands now, there is nothing built in that will make it a automated show. If you want to delete a picture, just remove it from the html.

L.S.,

When using the thickbox iframe, and your demo page as it’s src, jgGalViewII doesn’t work in IE7 and ff2.0 as well.
using a regular iframe there’s no problem at all. I would like to combine the beauty of both… but how…?

Excellent coding, it makes things sooo much easier! I’m using the plugin to build out a catalog site for a friend and, being a complete hack at javascript, I need a little assistance. i’ve got everything they want working except this: the client would like the small images to click thru to a new page and I’m having trouble getting that to work. I’m using method 2 with the fullPath option, so the is open, but no matter what I put in there, nothing clicks thru. What am I doing wrong?

Cheers,
Ed

DOH! Not enough sleep, left a tag open in the last post, sorry. =[

Hi Benjamin,

It seems the gallery doesn’t work in Safari 3.1 (525.13) on a Windows Vista system.
The main image doesn’t appear. All I shortly see is the loader image.

It works fine in Firefox 2.0.0.14 and IE7.

In Opera 9.27 it’s capricious.

Any suggestions would be greatly appreciated.

Hi,

Great plugin, first off! I’m trying to use it to implement a navigational catalog for a site I’m helping to build, but I can’t get the thumbnails to click through to a new page. I’ve tried mucking with the javascript a bit, and even tried writing new functions with jQuery but no luck.

It seems like all the a tags within the jqGalViewII div are disabled. Is there something I can disable or change to allow the thumbnails to be clicked and navigate to the appropriate page on the site?

@Edgar I looked at your code and I am not sure which what the best approach is, can you elaborate on what you are trying to do.

Sure thing! Unfortunately, the client hasn’t provided me with all of the proper images, but I’ll try to explain despite that. In a nutshell, each thumbnail image would represent a separate item in the catalog and, the goal is, clicking on a particular thumbnail would bring the user to the page for that item. For example, an image of the shirt with the koi design, when clicked, would bring up the /womens/koi.html page, where the user could choose a size/color, etc. Change allw.html to koi.html to see what I mean.

I’m just unable to get the click event on the thumbnails to do anything. Does that make more sense?

I would like to use this fantastic plugin to edit a gallery and I would like to:
- add dynamically images from jquery to the gallery;
- removing them dynamically;
- add menu option on the thumbs picture.

What I would like to know if there is a way to add and remove dynamically images?

Thanks
Makkina

hi benjamin!

first of all thank you for this great plugin, works like a charm for me.
the only thing i’d love to change is the odd distortion of the image when switching from portrait to wide photographs.
i looked at your view function and thought about re-ordering things or maybe loading the new image into another variable and then display it rather than changing the src attribute of the original image and changing the dimensions in the onload event – maybe you already have a solution at hand …

anyways – many thanks for making this magnificient plugin!

Hi Ben, fantastic gallery! I’m working on a site where I’m trying to put two of these on the same page. I managed to do so on the test page (here: http://www.thedecklededge.com/.....llery.html ) but in the second gallery, I only get the “loading” graphic until I actually click on one of the images. Can you help?

(You’ll notice that both galleries have the same images–that will change, obviously, once I figure out the technical issues!)

Again, this is an excellent script–very easy to use, even though I’m totally new to jQuery and not a writer of javascript. Thanks!!

Sarah, I think the issue is that the big image is being preloaded so when you are trying to preload two images that are exactly the same at the same time the browser will adjust its load and only load the one. Which will stop the code that needs to execute. Try swapping the first image in the second with a different image and see if that helps.

Okay…so here’s something weird. I tried what you said–I set up the second gallery with two brand-new images–and when I loaded the page locally on my computer, the same problem occurred. Then, just now when I uploaded the page to my site so I could show you, it loaded just fine.

No clue why that would be the case, but as long as it works when it’s on the site, that’s all that matters, I guess! Anyway, thank you very much for the tip and THANK YOU for the wonderful image gallery–I’ll credit you in the code!

Hi,

Very good library.
However I am trying to not allow the user to right click on the image ( for Copyright protection).
Does anyone know how to achieve that?

Thanks,
Florin

@florin check out http://www.codelifter.com/main.....lick1.html

But keep in mind that it only prevents right clicks, it does not prevent “save” or view the source other ways.

Hiya Ben!

great plugin, many thanks for the good job (and for sharing your family pics with us).

I’m using the jquery gall viewer II which style I’ve modified but cannot get to show the captions; am i missing something?

Your help will be appreciated.

Best regards,

h.

Hi Ben !

First, congrats for your plugin, it’s really impressive ! However, I’m having a problem when I try to load a pic in the holder. Nothing appears in the small preview, but the link works and displays the pic in the imgContainer…
My HTML code is:

Do you have an idea of what’s wrong ?

Thanks !

@Gary do have a url I can take a look at?

@HUgo some question goes for you, any url?

Yeah, of course !

http://www.75only.com/dent/locaux.php

Hi Ben,

yeah, sorry I missed the link, here it goes:
http://www.theh2project.com/?page_id=11

to summarize the pbs:
- no caption
- first picture by default has the wrong dimensions

I am using the jqgallviewii coz I’ve not been able to make the others work properly (thumbnails and pictures very small)

Otherwise this is a great plugin; one can easily guess you’ve spent hours developping it. I hope it didn’t prevent you from spending some time with your little one ;-)

Thanks again,

regards,

h.

Trackbacks

  1. The Book and the Cover » Blog Archive » jQuery: jqAlbumParser Plugin, parses out Flickr, Picasa clientside
  2. Benjamin Sterling Galleries: Wordpress Photo/Image Gallery Plugin for Flickr & Picasa | The Book and the Cover
  3. Jquery?N??? » NeiLyi.cn -???
  4. LongWay's Blog » Blog Archive ???jQuery??
  5. The ultimate jQuery Plugin List | Kollermedia.at
  6. sastgroup.com » Blog Archive » 240 plugins jquery
  7. ????? » 240?JQuery??
  8. ???? - ?????240??jQuery??
  9. ??240??jQuery?? | ?????????

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

62 queries. 0.797 seconds. Powered by WordPress visitor stats