Zoom in on image by opening in new window

Hello Webflowers

Is there a way to click on an image, which then opens up on a different page, which you can then zoom in on.

So for instance, if you click on the link below and then click on the infographic. The infographic then opens in a different window, which you can then zoom in on.

Alternatives would also be good, if it could be kept within Webflow.

Being able to do this with a Lightbox is not currently possible, as each image I want to expand is within my CMS.

Please help!

Thanks

Dan

In your example website, the link that opens in a new window is actually just a link to a big JPEG image. It uses a plain old < a > tag with _blank as the target.

The HTML is like this:

<a href="your-small-image.jpg" target="_blank"><img src="your-large-image.jpg" /></a>

The “zoom” effect is just your browser scaling the image up to 100% and then shrunk down to fit your browser.

Does this make sense?

Thanks @Elephant

Yes that makes sense. But to get that to work for me, would I just be able to insert that code in the body section of my CMS page?

Do you have any ideas for a better alternative for images that are too small to see the detail on the normal page and need to be expanded?

Thanks

A better solution is to use an image zooming script. Sirv is a very easy one. It looks like this:

  1. Create an account. Sirv
  2. Upload your images (just drag and drop them).
  3. Click the Embed button.
  4. Copy & Paste the code into your Webflow page.

If you want to paste the code into the HEAD section of your page, follow the instructions here:

http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

Hi

That looks good. The problem is that this is a CMS collection page and applicable to multiple blog posts with different images on multiple pages. As as far as I am aware, we’re not currently able to use embed code yet within a collection page.

Given that this is the case, I’m assuming your original idea wouldn’t work either as each image would need a different name in the code?

If you want to show different images on different pages and if the one section of code will be displayed on all pages, then you’re stuck. I can’t see any way around that.

Could you place all the relevant images in the code so that they’re all viewable on all pages?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.