How to show high resolution version of a photo on button click?

Comments

4 comments

  • Avatar
    Eyal Katz Talmon

    Hey Nick, thanks for reaching out!

    The article you've mentioned demonstrates how to zoom into images using JS. That method performs JS operations over img tags, and therefore can be used (in the same manner) whether you use Cloudinary, or not.

    There are many ways you could implement a zoom-in effect using Cloudinary, and specifically Cloudinary transformations. I've created the following simple example of zooming, by cropping the image -
    https://codepen.io/eyalkt/pen/OJxMxxK

    Here is a short explanation of what I've done - The image displayed originally was scaled down to a width of 400px, and when the user clicks on zoom-in I've taken a larger image (w_600) and cropped it to w_400.

    Another option you may want to consider is our Product Galley widget, which has a zoom-in capability built-in, and allows various customization options. You can get a sense of the widget's behavior and options on its demo page here - https://demo.cloudinary.com/product-gallery/ (and more options are showcased here).
    I also recommend you take a look at the widget's multiple zoom option.

    I hope it helps.
    Cheers!

    0
    Comment actions Permalink
  • Avatar
    Nick Medrano

    Hey thats fantastic! Thank you. Let me study this and get back to you (I am sure I will have more questions).

    0
    Comment actions Permalink
  • Avatar
    Eyal Katz Talmon

    Of course! Be sure to let us know when you have further questions :)

    0
    Comment actions Permalink
  • Avatar
    Nick Medrano

    Hi Eyal, can you provide a suggestion on a good "default" transformation setting I can use in the URL for the high resolution images ? For example, I have: `f_auto,q_auto:best`

    Anything else I should include for the high res images? Just looking for a good starting point. 

    Update: I think that product zoom widget may save me some time...I'll try that out. We will see how it plays with SSR tools like Nuxtjs.

     

    0
    Comment actions Permalink

Please sign in to leave a comment.