Making thumbnail images larger - directions for dummies?

[suzetteb58689955]

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?

[BenPleysier]

Have a look at Nancy's tutorial Bootstrap Modal + Carousel Gallery - https://alt-web.com/

[hans-g.]

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:

Hans-Günter

[hans-g.]

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

[hans-g.]

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

[pziecina]

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

[suzetteb58689955]

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]

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.]

Hello Suzette,

your website (with these interesting images) is - in my eyes - similar to Paula P.'s elaboration, while mine only could show a principle. maybe you want download Lightbox, so you can use this link: Lightbox and Flexbox finds there CSS Flexbox (Flexible Box)

Hans-Günter

[Nancy OShea]

Suzette,

1) You need  one responsive website layout for optimal viewing on desktops, tablets and smartphones.

2) You will need a folder of thumbnail images and a folder of full size images.

3)  Images can by dynamically populated to your page by PHP code.   To add / delete images, simply upload new ones to your server.

Live example below.

Alt-Web Demo : Dynamic Photo Gallery with Bootstrap, PHP & Fancybox

[suzetteb58689955]

Well, this Dreamweaver Dummy has been studying the links you folks kindly sent. The info hasn't been quite registering yet. I did recall how the original web designer made thumbnail copies of my newsletters then he used that link/line/connector to connect them to a PDF copy of the actual newsletter.

I just tried to see if this principle could work with adding a thumbnail jpeg copy of one of paintings and the using that link/connector/line to connect it larger jpeg of the image. I figured if it could work for my newsletters, why not my paintings?

Well it didn't work.

Here is the message I received:

Not Found

The requested URL /Paintings pages/Paintings for enlarging on WEB/Moonlit Way.jpg was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Here is a link to the webpage where I tried to create the section where you could access a larger image:

Suzette Boulais: Paintings

And here are screenshots from inside Dreamweaver where I tried to create links

So obviously this system I used to connect a thumbnail to a PDF won't work for a thumbnail and larger jpeg?

[Nancy OShea]

Do not use spaces or special characters in folder or file names.  Hyphens and underscores are OK but not spaces.

Below is the HTML code to link a thumbnail to full size image.

<a href="full_size_1.jpg"><img src="thumbnail1.jpg" alt="description"></a>

You must upload both images to your server.

[suzetteb58689955]

OK, Nancy, I will rename and try this. Thanks for everyone's help. I even downloaded Lightbox which is a program I can tell I would love, but couldn't figure out how to use it from inside Dreamweaver.

[Nancy OShea]

Lightbox or Fancybox requires some basic coding skills.   You can't manage this from the Design panels alone.

[suzetteb58689955]

<a href="full_size_1.jpg"><img src="thumbnail1.jpg" alt="description"></a>

So I renamed both my images as suggested and put the above info in the Link field and still getting an error.

I was thinking that once I can get one thumbnail image to show in a larger form, then I will do the entire dozen.

But wanted to get this first one right. 

[Nancy OShea]

Please tell us which folder(s) your images are in?

In my example, below both images reside in an images folder in my local site.  Also, my code contains no errors demoted by the Green Check mark.   If you have a Red X, you need to fix your code errors.

[suzetteb58689955]

OK, back to the drawing board. Now I can' even see any picture at all on my website, even though I see the thumbnail inside the Dreamweaver program. Ugh.

[Nancy OShea]

Check your code for errors with the online service below.

HTML - http://validator.w3.org/

[suzetteb58689955]

[Invalid] Markup Validation of http://www.suzetteboulais.com/ - W3C Markup Validator

Yikes, 5 errors, 16 warnings. There comes a time when I begin to lose my mind and have reached a limit over what one would think is a relatively easy task for a relatively intelligent person. Am not so intelligent when it comes to Dreamweaver.

[suzetteb58689955]

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]

Do you use Photoshop to optimize images for the web?

Which version of Photoshop?

[suzetteb58689955]

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.

[Nancy OShea · Accepted solution]

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>

<html lang="en">

<head>

<meta charset="utf-8">

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

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Bootswatch Solar Theme-->

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/solar/bootstrap.min.css" rel="stylesheet" integrity="sha384-GC77SCz5O11gVtXl0sSfbQYEWSSznn1wPDHgL1BGUTFU9iEoUrG4IOJa5CBVY8kR" crossorigin="anonymous">

</head>

<body class="container-fluid">

<header class="row center-block text-center">

<h1>My Awesome Website</h1>

<h3>Some Pithy Slogan</h3>

</header>

<section class="row center-block text-center">

<!--INLINE THUMBNAIL IMAGES-->

<ul class="list-inline">

<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br>

Caption</a></li>

<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br>

Caption</a></li>

<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br>

Caption</a></li>

<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="3"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/4"><br>

Caption</a></li>

<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="4"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/5"><br>

Caption</a></li>

<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="5"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/6"><br>

Caption</a></li>

</ul>

</section>

<hr>

<!--end of thumbnails-->

<footer class="row text-center">

This is the footer

</footer>

<!--BEGIN MODAL WINDOW-->

<div class="modal fade" id="myModal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

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

<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>

</div>

<div class="modal-body">

<!--CAROUSEL GALLERY & FULL SIZED IMAGES HERE-->

<div id="myGallery" class="carousel slide" data-interval="false">

<div class="carousel-inner">

<div class="item active"> <img src="https://placeimg.com/600/400/nature/1" alt="item0">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Slide 0  description.</p>

</div>

</div>

<div class="item"> <img src="https://placeimg.com/600/400/nature/2" alt="item1">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Slide 1 description.</p>

</div>

</div>

<div class="item"> <img src="https://placeimg.com/600/400/nature/3" alt="item2">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Slide 2  description.</p>

</div>

</div>

<div class="item"> <img src="https://placeimg.com/600/400/nature/4" alt="item3">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Slide 3 description.</p>

</div>

</div>

<div class="item"> <img src="https://placeimg.com/600/400/nature/5" alt="item4">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Slide 4 description.</p>

</div>

</div>

<div class="item"> <img src="https://placeimg.com/600/400/nature/6" alt="item5">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Slide 5 description.</p>

</div>

</div>

<!--end carousel-inner--></div>

<!--Begin Previous and Next buttons-->

<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>

<!--end carousel--></div>

<!--end modal-body--></div>

<!--begin modal footer-->

<div class="modal-footer">

<div class="pull-left">

<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>

<!--end modal-footer--></div>

<!--end modal-content--></div>

<!--end modal-dialoge--></div>

<!--end myModal--></div>

<!--latest jQuery 3 JS-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Latest Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

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

Photoshop for Beginners

[suzetteb58689955]

Thank you, Nancy. I have a feeling this Dreamweaver Dummy may be asking questions as I proceed. I've never created my own new page before. This was all done by the original web designer. All I've tried to do lately and via this forum is to update what he originally designed. I've never tested locally, either... Oh boy. I may be more than a poor technician like you can handle.

[hans-g.]

Hello Suzette,

again I couldn't resist taking one step further and fill Nancy's elaboration with four of your interesting images, to see how it works and to show Paintshop's approach. Here is the link to the result Bootstrap Modal + Carousel Gallery

Greetings and thank you Nancy!

Hans-Günter