Highlighted

Making thumbnail images larger - directions for dummies?

Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Learn Dreamweaver

Views

1.1K

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

Making thumbnail images larger - directions for dummies?

Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Learn Dreamweaver

Views

1.1K

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
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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


Ben

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...
Mar 11, 2018 1
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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:

bild.JPG

Hans-Günter

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...
Mar 11, 2018 1
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 1
LEGEND ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 0
Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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.

🙂

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...
Mar 11, 2018 0
LEGEND ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 11, 2018 1
Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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?
2.JPG

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 11, 2018 0
Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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.

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 11, 2018 0
Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 11, 2018 0
Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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.

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...
Mar 11, 2018 0
Adobe Community Professional ,
Mar 11, 2018

Copy link to clipboard

Copied

Check your code for errors with the online service below.

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 11, 2018 0
Explorer ,
Mar 11, 2018

Copy link to clipboard

Copied

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

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...
Mar 11, 2018 0