Zoom in on certain images cc2020

[nigelh70638339]

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!

[BenPleysier]

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

[Ben M]

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/

[osgood_]

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.

[Nancy OShea]

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.

[osgood_]

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]

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.

[nigelh70638339]

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!

[osgood_]

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

[Ben M · Accepted solution]

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.

[nigelh70638339]

OK,  I have made a mistake from the outset thinking that I could just magnify just little areas. I was hoping to be able to just magnify the cards with the adverts and the barcode.

I am selling off my entire collection and once scanned they sell, so I cannot use a larger size than I already have. There will be thousands of pages in the end, so it would be too time consuming.

Well, it was just an idea!

Thank you all for you help!

[Nancy OShea]

The mistake you made was building a static site instead of a dynamic one.  Your catalog should be stored in a server-side database.  One detail.php page can accommodate hundreds or thousands of products.

Good luck!

[nigelh70638339]

Hi Nancy,

It has been evolving over the last 15 years so it probably still in the stone age.

I have tried using a database but I just cant get to grips with it all, although it would save time!

Thanks everyone once again for the help!