Highlighted

Zoom in on certain images cc2020

Explorer ,
Aug 24, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

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.

Views

90

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Zoom in on certain images cc2020

Explorer ,
Aug 24, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

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.

Views

91

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 24, 2020 0
Adobe Community Professional ,
Aug 24, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2020 1
Adobe Community Professional ,
Aug 24, 2020

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2020 0
LEGEND ,
Aug 24, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2020 0
Adobe Community Professional ,
Aug 24, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2020 1
LEGEND ,
Aug 24, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2020 0
Adobe Community Professional ,
Aug 24, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2020 1
Explorer ,
Aug 25, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 25, 2020 0
LEGEND ,
Aug 25, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 25, 2020 0
Adobe Community Professional ,
Aug 25, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 25, 2020 1
Explorer ,
Aug 26, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 26, 2020 0
Adobe Community Professional ,
Aug 26, 2020

Copy link to clipboard

Copied

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!

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 26, 2020 0
Explorer ,
Aug 27, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2020 0