benjaminsterling.com

1. Craig

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

3. DragonI

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

5. DragonI

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

8. wittmania

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

10. Cath

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

12. Cath

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

14. Cath

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

16. Cath

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

19. Kris Corkum

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

22. Mike

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

24. Cath

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

26. johan

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

28. Cath

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

30. Cath

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

32. Cath

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

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

34. Mike

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

36. Bill

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

38. Bill

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

40. Anna

Hello Benjamin,

I’m not clear on your sample

code

< view plain text >

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

42. Anna

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

44. samti

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

46. samti

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)

php

< view plain text >

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.

December 13th, 2007 at 5:55 am | Link

49. Robert Labbe

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.

December 19th, 2007 at 1:00 pm | Link

51. scott

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!

December 19th, 2007 at 6:48 pm | Link

53. scott

ah. awesome! that worked!

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

December 19th, 2007 at 8:52 pm | Link

56. Robert Labbe

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

December 19th, 2007 at 10:41 pm | Link

58. Robert Labbe

Hello Again,

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

code

< view plain text >

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

to:

code

< view plain text >

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.

December 19th, 2007 at 11:04 pm | Link

60. Robert Labbe

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

code

< view plain text >

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

December 19th, 2007 at 11:18 pm | Link

62. scott

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

December 19th, 2007 at 11:27 pm | Link

65. Robert Labbe

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.

December 19th, 2007 at 11:40 pm | Link

67. scott

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!

December 20th, 2007 at 8:44 am | Link

69. scott

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

December 20th, 2007 at 9:01 am | Link

72. Robert Labbe

Thanks so much, that fixed it.

January 4th, 2008 at 3:11 pm | Link

75. JB

Hi Benjamin

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

January 8th, 2008 at 5:37 pm | Link

77. JB

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

January 8th, 2008 at 6:08 pm | Link

79. Colin

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?

January 30th, 2008 at 3:09 am | Link

81. Swazi Swazi

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

February 14th, 2008 at 3:36 pm | Link

83. Fernando

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:

code

< view plain text >

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:

code

< view plain text >

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

February 16th, 2008 at 11:59 am | Link

85. David

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

February 18th, 2008 at 7:45 am | Link

88. Steven

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.

March 17th, 2008 at 4:46 pm | Link

90. Adam

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.

March 24th, 2008 at 8:22 pm | Link

92. Hermit

How to delete a picture?

March 24th, 2008 at 9:55 pm | Link

94. Gree

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

April 16th, 2008 at 7:47 am | Link

96. Edgar

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

April 20th, 2008 at 3:43 pm | Link

98. Edgar

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?

May 11th, 2008 at 11:21 pm | Link

100. Edgar

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?

May 11th, 2008 at 11:59 pm | Link

102. ben

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!

May 27th, 2008 at 4:10 am | Link

105. Sarah

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!

June 15th, 2008 at 9:22 pm | Link

108. HUgo

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.

June 20th, 2008 at 11:22 pm | Link

111. Gary

Yeah, of course !

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

June 28th, 2008 at 6:30 am | Link