Streaming live at 10am (PST)

Zoom in on image by opening in new window


#1

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


#2

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?


#3

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


#4

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

https://sirv.com/demos/image-zoom/

  1. Create an account. https://my.sirv.com/#/signup
  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


Link thumbnail to a larger JPG image
#5

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?


#6

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?


#7

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