benjaminsterling.com

1. Steven

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

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

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

PLAIN TEXT

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:

PLAIN TEXT

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

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

8. Colin

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

PLAIN TEXT

CODE:

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!

January 30th, 2008 at 4:15 am | Link

10. Jquery?N??? » NeiLyi.cn -???

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

January 15th, 2008 at 3:47 am | Link