How to do it

In the document.ready() function of the jQuery script block, define a variable for the z-index of an image:

The z-index refers to an element's position on the Z-axis. It determines the stack order of an element. An element with a lower stack order will be overlapped by an element with a higher stack order.

Assuming the images are stacked one above the other, get the maximum possible z-index that is equivalent to the total number of Image controls on the page:

var max_z = $(".imgcontainer img").length;

Each Image control in the div area is assigned a unique z-index from 1 to max_z. The element with the highest index max_z will overlap all others and is the active image in the gallery.

3. Loop through the images in the div area:

$(".imgcontainer img").each(function(

4. Increment the z-index for the next element:

5. Apply the respective z-index to the image:

6. Thus, on page load, the form displays the image with the highest z-index - Images, as in the following screenshot:

0 0

Post a comment