Random product thumbnails

Question

The shop page on my website displays the "full-length" image of a product, and then, on hover, a "close-up" image.

I wish to randomise this, so that for some products, the "close-up" is displayed on load, and for others, the "full-length". And to have this random with every page load.

"Full-length" images are always named xxx1.jpg, and "close-up" images are xxx2.jpg, e.g.

<li>
    <div id="product">
        <img class="full-length" src="/image-1.jpg"/>
        <img class="close-up" src="/image-2.jpg"/>
    </div>
</li>

I guess I need a random number generator, between 1 and 2, and then for the second image to be what the first image is not.

Any help, sincerely and very much obliged.

what you exactly you wanna you do? want to show one image out of given images? PHP? — rtraees, Sep 10 '17 at 12:51

score 0 · Accepted Answer · answered Sep 10 '17 at 13:00

i think this can help you.Java script code is:

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
function onloadSetImage()
{
document.getElementById('product1').src='image-'+getRandomArbitrary(1,5);
}

html (onload can check here):

<body onload="onloadSetImage();"/>
<li>
  <img id="product1" src=""/>
</li>
</body>

Random product thumbnails

1 Answers1