Javascript to hide images

[ptemedia]

Hi. I am making an asp website to sell items. On the details for individual products page I have an image and 3 smaller ones beneath. Clicking on one of them will bring up a larger image on the screen.

However, at the moment, I have to have 4 images for every product, but some products only have 1 or 2 images. I was wandering if there was a way to hide the extra unneeded thumbnails if the src is invalid. Or if there was a better way to achieve what I am trying to do.

The images are displayed as shown below. By using the product name to find the initial image and then letters 'a' 'b' and 'c' for the other thumbs.

(the images are all nested in <a> </a> and when clicked runs some javascript to show the picture in the center of the screen.

<img src="images/thumbs/<%#Eval("ProductName") %>.jpg" alt="<%#Eval("ProductName") %>">
<img src="images/thumbs/<%#Eval("ProductName") %>a.jpg" alt="<%#Eval("ProductName") %>">
<img src="images/thumbs/<%#Eval("ProductName") %>b.jpg" alt="<%#Eval("ProductName") %>">

Thanks

[Airshow]

Ptemedia,

Approach 1:
As the page is composed server-side, you may be able to test whether each image exists or not, and then include HTML only where the test is positive. I guess asp is capable of this (php certainly is).

Approach 2:
Client-side, there is indeed a way to know whether images have successfully loaded or not as they fire one of two events, .onload or .onerror , to which handlers can be attached :

image.onload = function(){ /*  do something here */ }
image.onerror = function(){ /*  do something else here */ }

However, simply attaching the handlers in the window's onload handler (the natural place) would be too late because the img's src attributes are set in HTML (which is interpreted earlier).

A slightly differnt strategy is therefore required.

In HTML, suppress images' "src" attribute, and get javascript (a) to establish onerror handlers then (b) to set the src attributes; both after the page has finished loading.

There's a number of ways in which to write the code.

First, a little CSS to hide all thumbnails initially:

img.thumb { display:none; }

Then, modify your HTML as follows :

<img class="thumb" srcurl="images/thumbs/<%#Eval("ProductName") %>.jpg" alt="<%#Eval("ProductName") %>">
<img class="thumb" srcurl="images/thumbs/<%#Eval("ProductName") %>a.jpg" alt="<%#Eval("ProductName") %>">
<img class="thumb" srcurl="images/thumbs/<%#Eval("ProductName") %>b.jpg" alt="<%#Eval("ProductName") %>">

Note, we have added class="thumb" and changed src= to the custom attribute srcurl= , effectively preventing the images from loading, whilst allowing us still to know the url that applies to each <img> tag.

Now, in standard javascript :

onload = function() {
    var images = document.getElementsByTagName('img');
    for(var i=0; i<images.length; i++) {
        if(images[i].className === 'thumb') {
            images[i].onload = function(){ this.style.display = 'inline'; }
            images[i].src = images[i].getAttribute('srcurl');
        }
    }
};

Using the jQuery lib (or others) the whole thing could be done as follows :

$(document).ready(function(){
    $('.thumb').load(function(){
        $(this).css('display', 'inline');
    }).each( function(){
        $(this).attr('src', $(this).attr('srcurl'));
    });
});

Whichever approach you choose, you should use an XHTML DOCTYPE rather than HTML, as HTML does not (at least theoretically) support custom attrributes.

Airshow

[ptemedia]

Thank-you for your help. That all made perfect sense and it is now working perfectly.

[Airshow]

Cool :cool: