Skip to main content

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

Nick Medrano

Hello, I recently came upon this article written by Cloudinary on how to create JavaScript functions for zooming in and out of photos. However, the article did not actually provide an example of using the Cloudinary service.

Article: Cool Tricks for Resizing Images in JavaScript (cloudinary.com)

I have an app where I will posting historical images. I need to show a reduced auto compressed image for displaying on the page, but I will need a button that says "Zoom In" which, when clicked, will show a higher resolution version of the same image for detail observation. 

Cloudinary had a code sandbox demo of something like this, but Cloudinary services were not used (just generic JS assumptions): Live Demo: JavaScript Increasing and Decreasing Image Size (tutorialrepublic.com)

Does anyone have advice/tips on how to make this work with Cloudinary stored images? Just looking for help on getting started (I'll be using VueJS framework)

Thanks!

0

Comments

4 comments

Date Votes
  • 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
  • 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
  • Eyal Katz Talmon

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

    0
  • Nick Medrano
    Edited

    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

Post is closed for comments.

Didn't find what you were looking for?

New post