responsive gallery, <a> <img> tags

cryptolect
cryptolect Member Posts: 1 ✭
edited August 21 in Developer APIs

hi

i have a gallery that 1st loads thumbs from <img> and within here there is a srcset. They are transformed correctly according to browser width and i use this url transform for all images in the srcset replacing 256 up to larger sizes:

/f_auto/q_auto/c_scale,w_256(etc…)/

<div class="grid-item item animated-fast" data-animate-effect="fadeIn">
<a href="full-size-popup.jpg" data-track-content class="image-popup" title="description">
<div class="img-wrap">
<img
sizes="(min-width: 50em) 50em, 100vw"
srcset="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_256/docs/house.jpg 256w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_512/docs/house.jpg 512w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_768/docs/house.jpg 768w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_1024/docs/house.jpg 1024w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_1280/docs/house.jpg 1280w"
src="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_512/docs/house.jpg"
alt="Responsive house" />
</div>
<div class="text-wrap">
<div class="text-inner popup">
<div>
<h2>description</h2>
</div>
</div>
</div>
</a>
</div>

When clicking on a thumb for enlargement, what URL and transform do i need for full-size-popup.jpg in <a href= ?

i don't want an additional wasted request when clicking on the thumb for enlargement and i can't find much on scrset with an a href - the resultant pop-up should be sized appropriately too.

or is there a better way than using the img srcset, like using shrinkwrap.js or client-hints?

thanks

Tagged:

Answers

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 152 admin

    Hi,

    In the case that you want to use a single delivery for all the HTML tags of your application, you can use JavaScript to manage the updating of the displaying <img> tag.

    Also, use the onClick event attribute to load a function that returns a false - i.e., in order not to launch the GET request of its href source.

    For example:

    <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <a href="" class="image-popup" title="Nimbuses" onclick='return showImage(this)' > <img id="imageSource1" src="https://res.cloudinary.com/photistic/image/upload/f_auto/q_auto/c_limit,w_1500/v1720355667/img_1_yzw5dk.jpg" style="width: 200px; height: 133px" /> </a> <br/> <img src="" id='selectedImage' style="width: 500px; height: 400px;" /> <script type='text/javascript'> function showImage(item) { const img_target = document.querySelector('#selectedImage'); img_target.src = document.querySelector('#imageSource1').src; return false; }</script>

    Hope this helps. Please let me know if you have any further questions.

    Best regards,
    Eric

    Helpful Links For You
    💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
    🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
    📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
    📰 Check out the Cloudinary blog for the latest company news and insights

Categories