Inspiring

Answered

Making thumbnail images larger - directions for dummies?

Forum|Forum|7 years ago
March 11, 2018
6 replies
3592 views

I've had a few folks critique my website and their biggest critique is that one can't look at thumbnails of my artwork and click on the images of my paintings to make them bigger.

Since all work I've done on my site I've done using CSS, not HTML, are there any simple CSS directions for dummies that I can follow so that when folks do click on a small thumbnail it can be enlarged to about 10 x bigger?

This topic has been closed for replies.

Correct answer Nancy OShea

Nancy, the images I've been working with are in a Paintings folder and then in a sub folder inside this folder that say Paintings for enlargin on web.

The Photoshop version I use is CC 2015.

Which here is another quirky issue. Sometimes PS simply does not open at all. I have to go into task manager and close it out there and then I can reopen it. And yet even when work on an item and then close PS, then try to open it again later when I work on another image, same thing. Won't open. PS worked well yesterday and this morning and now this afternoon working on the website, I'm unable to open it unless I go into task manager.

I think I'm going to call it a day today and hope that maybe tomorrow I'll have some better luck.

Below is the code for a responsive layout & modal image viewer. Simply copy & paste this code into a new, blank document. Save and test locally. Replace the placeholder images (thumbnails & full size) with your own images.

<!doctype html>

<head>

<title>Bootstrap Modal + Carousel Gallery</title>

</head>

<h1>My Awesome Website</h1>

<h3>Some Pithy Slogan</h3>

</header>

Caption</a></li>

Caption</a></li>

Caption</a></li>

Caption</a></li>

Caption</a></li>

Caption</a></li>

</ul>

</section>

<hr>

This is the footer

</footer>

<div class="pull-left">My Gallery Title</div>

</div>

<h3>Heading 3</h3>

<p>Slide 0 description.</p>

</div>

<h3>Heading 3</h3>

<p>Slide 1 description.</p>

</div>

<h3>Heading 3</h3>

<p>Slide 2 description.</p>

</div>

<h3>Heading 3</h3>

<p>Slide 3 description.</p>

</div>

<h3>Heading 3</h3>

<p>Slide 4 description.</p>

</div>

<h3>Heading 3</h3>

<p>Slide 5 description.</p>

</div>

</div>

</div>

</div>

<small>Photographs by <a href="https://placeimg.com" target="new">placeimg.com</a></small>

</div>

<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

</body>

</html>

Regarding Photoshop, please post in the forum below where the PS experts can help you.

Photoshop for Beginners

S

suzetteb58689955Author

Inspiring

Am not getting code errors, but now have black space on the image I've been trying to work on on paintings page.

Nancy OShea

Community Expert

Do you use Photoshop to optimize images for the web?

Which version of Photoshop?

Nancy O'Shea— Product User & Community Expert

S

suzetteb58689955Author

Inspiring

Nancy, the images I've been working with are in a Paintings folder and then in a sub folder inside this folder that say Paintings for enlargin on web.

The Photoshop version I use is CC 2015.

Which here is another quirky issue. Sometimes PS simply does not open at all. I have to go into task manager and close it out there and then I can reopen it. And yet even when work on an item and then close PS, then try to open it again later when I work on another image, same thing. Won't open. PS worked well yesterday and this morning and now this afternoon working on the website, I'm unable to open it unless I go into task manager.

I think I'm going to call it a day today and hope that maybe tomorrow I'll have some better luck.

pziecina

Legend

suzetteb58689955 wrote
I've had a few folks critique my website and their biggest critique is that one can't look at thumbnails of my artwork and click on the images of my paintings to make them bigger.
Since all work I've done on my site I've done using CSS, not HTML, are there any simple CSS directions for dummies that I can follow so that when folks do click on a small thumbnail it can be enlarged to about 10 x bigger?

First I will say do not enlarge an image by the amount you are suggesting, as 1.5-2x the original image size will be o/k, but anything larger and you will have pixelization of your images.

You could use a simple css transform function to scale your image, (along with a css animation to set a time for the image to display at full size before reducing back to the original size) -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

But -

you would have to set your image size to the users screen size using vh/vw dimensions, otherwise there is a very good chance your image will be bigger than the users screen size, especially if your site user is on a mobile device. This will happen with any of the current image enlargment techniques not using % or vh/vw sizing.

A much better solution would be for you to use a simple lightbox that also uses vh/vw for its sizing, a number of css only lightboxes can do this, or use an old fashioned javascript driven solution.

simple css only example - https://codepen.io/gschier/pen/HCoqh

S

suzetteb58689955Author

Inspiring

Here is a link to page where I need help. Right now, I've create a "collage" of my art pieces as one image. I want to forgo going this route and recreate rows of images whereby you click on a thumbnail and then it enlarges each piece of my art for better view:

Suzette Boulais: Paintings

I'll study what you folks have generously shared here. It's still a bit Greek to me. That's why I titled my heading a question for dummies.

:-)

pziecina

Legend

In a world of rwd, in which we have to cater for everything from small mobile devices, to large 4k tvs, you would be better advised to use css flexbox, with a lightbox function for such a layout.

Even though I created the following page back in 2012, as an experiment in using flexbox, (and the lightbox function does not always work correctly anymore) it may give you an idea of what is now possible in layouts using flexbox, and what to use for a lightbox.

http://www.pziecina.com/Adobe/lightbox/lightbox.html

hans-g.

Legend

Here's my code, neutralized:

<td width="50%"><p><a href="YourPicSmall.jpg" target="_blank"><img src="YourPicBigger.jpg" width="232" height="163" alt=""/></a></p> >>> See Aus früherer Zeit ;-))) and now click into the image Grenzbegegnungen in Anatolien 1988 T. 1

hans-g.

Legend

... and please for a better understanding, send a link to your website in question.

hans-g.

Legend

Hello Suzette,

if I understand you in the right way so you need two images, the smaller one and the other which is about 10 x bigger. For this I would use Photoshop, thereby dimensions and form stability remain.

Now you only need to click into the greater image (see my german DW) >>> Hyperlink: