Inspiring

Answered

Zoom in on certain images cc2020

Forum|Forum|5 years ago
August 24, 2020
4 replies
1285 views

Hello,

I have just updated to CC2020 and I'm blown away!

So with this I want to make a small change to the site so that visitors can zoom in or make larger some images. I dont want ridiculously high resolution zoom, maybe just 2 or 3x.

Is there a way that this can be done?

Thanks in advance!

This topic has been closed for replies.

Correct answer Ben M

Just looking through the entire site is like this. I would be worried about trying to zoom if you don't have larger versions of these images. To osgood's point, the purpose appears to make the cards readable, but zooming on a digital image does not make the image readable, it just makes the image more pixelated and thus unreadable.

Also all of these pages are HTML. This would end up being a ton of work. You are looking at hundreds, if not more than 1,000 pages of code. Have you considered migrating to a CMS and investing in a gallery plugin that fits your needs? Personally, with this extensive of a catalog, I would recommend going in that direction.

nigelh70638339Author

Inspiring

Thank you everyone for your replies they are all apprecited.

Below is a link to the type of images that I want to magnify a little.

https://ultimate-top-trumps.co.uk/england/winning_moves/2016/007.html

This is because there are different versions. I wanted to make it clearer.

Would something like a magnifying glass be better?

Thanks in advance!

O

osgood_

Legend

At the moment the image at the url you supplied is just one large png image? Are you intending to slice the large png into individual thumbnail images of each card and then when a user clicks or hovers on the thumbnail images a slightly larger one of each card in the pack zooms in a little?

What's the purpose of this - just for some visual appeal or should the user be able to read the text included in the card images as well? These are obviously 'product' cards so I guess the text needs to be part of the image.

Personally I would probably use an overlay modal window to show each card individually, similar to the one Nancy showed in her thread, link below:

https://alt-web.com/TUTORIALS/?id=bootstrap_modal_carousel_gallery

B

Ben M

Correct answer

Community Expert

Just looking through the entire site is like this. I would be worried about trying to zoom if you don't have larger versions of these images. To osgood's point, the purpose appears to make the cards readable, but zooming on a digital image does not make the image readable, it just makes the image more pixelated and thus unreadable.

Also all of these pages are HTML. This would end up being a ton of work. You are looking at hundreds, if not more than 1,000 pages of code. Have you considered migrating to a CMS and investing in a gallery plugin that fits your needs? Personally, with this extensive of a catalog, I would recommend going in that direction.

Nancy OShea

Community Expert

Bootstrap Simple Image Zoom

https://alt-web.com/TUTORIALS/?id=bootstrap_simple_image_zoom

Bootstrap Modal + Carousel = Picture Gallery

https://alt-web.com/TUTORIALS/?id=bootstrap_modal_carousel_gallery

The above examples work on all devices -- with or without a mouse.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

https://alt-web.com/TUTORIALS/?id=bootstrap_simple_image_zoom

hummm that first example is poor.......... thats exactly not the way to zoom a thumbnail, to 2 or 3 times its original size as the image deteriorates, YOU KNOW THAT. The example should either replace the thumbnail for the larger image when zoomed or if youre being totally lazy, load the large image, by default, as the thumbnail but this will result in a slower page load depending on the size of the images.

Second example is way better if you want to show large images from a gallery of thumbnails. This 'zoom effect' is really only supposed to be used to bring a little subtle change to the visual appearance to provide some additional eye candy.

Nancy OShea

Community Expert

Yes, demo 1 illustrates exactly why zooming low res images is a bad idea. The effects are less blurry with higher res images but at the price of higher bandwidth, too. I prefer the 2nd more conventional "Lightbox" approach.

Nancy O'Shea— Product User & Community Expert

B

Ben M

Community Expert

I would be careful when you say "zoom" because zooming would blur an image if you try to serve it at a size larger than the image is. You should either use 2 images (thumbnail + full size) or use full size and just reduce it's resolution for the thumbnail for your gallery. Here's a neat little image gallery with bootstrap that you would be able to code up with Dreamweaver.

https://css-tricks.com/creating-a-modal-image-gallery-with-bootstrap-components/

O

osgood_

Legend

I agree, zooming should only be used to create a subtle visual effect not for enlarging a set of thumbnail images 2 or 3 times their original size, without the deployment of a small thumbnail and associated large image. A zoom effect modal would be a better option for a gallery of thumbnail images, the large images only get loaded when required. Of course the OP could also be refering to a magnify effect, its not clear from the reduced information supplied.

BenPleysier

Community Expert

Have a look at https://www.w3schools.com/howto/howto_css_zoom_hover.asp

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded