Search code examples
cssimageprogram-entry-point

Change the main image in bulk

I have this code:

<div class="product-image-gallery">
    <img id="image-main" class="gallery-image visible" src="http://classyeyewear.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/9/3/9306abca7f8f0f2361dcba0aa50171db_4.JPG" alt="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1" title="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1">
    <img id="image-0" class="gallery-image" alt="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1" src="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/4/2/42fd546e1ab67968e56999444d140483_3.JPG" data-zoom-image="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/4/2/42fd546e1ab67968e56999444d140483_3.JPG">
    <img id="image-1" class="gallery-image" alt="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1" src="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/5/8/586be5d8ae054ce28e8e778988a6c3ea_3.JPG" data-zoom-image="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/5/8/586be5d8ae054ce28e8e778988a6c3ea_3.JPG">
    <img id="image-2" class="gallery-image" alt="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1" src="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/8/0/80083f5efe19a54f290be7f40568f2f3_3.JPG" data-zoom-image="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/8/0/80083f5efe19a54f290be7f40568f2f3_3.JPG">
    <img id="image-3" class="gallery-image" alt="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1" src="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/9/3/9306abca7f8f0f2361dcba0aa50171db_4.JPG" data-zoom-image="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/9/3/9306abca7f8f0f2361dcba0aa50171db_4.JPG">
    <img id="image-4" class="gallery-image" alt="Prada SPR52Q SL3-4M1 Ruthenium Frame Brown Sunglasses 57mm SPR 52Q SL3 4M1" src="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/8/4/84cd379f607b2e158765a5153e3dca31_3.JPG" data-zoom-image="http://classyeyewear.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/8/4/84cd379f607b2e158765a5153e3dca31_3.JPG">
</div>

I want id="image-0" to be the main image. How can I do it using CSS?

Thanks

Solution

  • Short answer: You can't. CSS doesn't allow dynamic class changing.

    Long answer: You can't, but there's always JavaScript (aka jQuery in my case):

    $(".product-image-gallery img").removeClass("visible"); // remove visible class from all elements
$("#image-0").addClass("visible");