How do I get large images to display when thumbnails are clicked?

Report · Jul 06, 2019

Is there still a way to do this in Dreamweaver? This used to be so easy! All I had to do was add a "behavior" to trigger the large image to pop up in a window that overlaid on the main page.

But the behaviors are now gone from Dreamweaver (I'm using Dreamweaver CC 2019). After lots of searching, I gather that what I want to do is now called "modals." But I can't find any one, straight-forward answer on how to do this; they're all different. Can anyone suggest a simple way to do this without the trial and error of adding a bunch of code that may or may not work?

I have page of thumbnails laid out in a grid. All I want is for the user to be able to click on any one thumbnail and have it pop up in a window that overlays the main page and displays the full-sized image. I don't need titles, captions, buttons, or anything else - maybe just the common "X" in the upper right-hand corner to close the window. I don't care about a "veil" covering the rest of the main page. I just want this to be as simple as possible.

I'm using Bootstrap 4 and I've found a lot of instances of the word "modal" when I do a search in the Bootstrap css. Does this indicate that what I need is already built into the Bootstrap css? If so, I'm wondering why all the Youtube videos and reference pages say to add a bunch of css and javascript? Is there a way to simply use what is already there in Bootstrap to do what I need to do?

Report · Jul 06, 2019

nancyfarlow wrote
I'm using Bootstrap 4 and I've found a lot of instances of the word "modal" when I do a search in the Bootstrap css. Does this indicate that what I need is already built into the Bootstrap css? If so, I'm wondering why all the Youtube videos and reference pages say to add a bunch of css and javascript? Is there a way to simply use what is already there in Bootstrap to do what I need to do?

No, Bootstrap by default only deals with one modal at a time so you would have to create as many modals as you have images. You need some javascript to do this dynamically, basically the javascript gets the image 'src' and inserts it into a single modal window as each image is clicked through, less code to manage.

I'm sure someone who works on a daily basis with Bootstrap has encountered this many timess and can steer you in the right direction for the best solution for that package. If push comes to shove I can give you some simple javascript which will do the same job.

Report · Jul 06, 2019

My page has three .js files:

jquery-3.3.1.min.js

popper.min.js

bootstrap-4.3.1.js

To which one do I add the script for the modals?

Report · Jul 07, 2019

Have a look at osgood_'s answer at: Bootstrap 4 ekk0-lightbox 5.3.0 prev/next controls missing… which was derived from https://codepen.io/soumyajitn/pen/VbqLew

Wappler, the only real Dreamweaver alternative.

Report · Jul 07, 2019

BenPleysier wrote
Have a look at osgood_ 's answer at: Bootstrap 4 ekk0-lightbox 5.3.0 prev/next controls missing… which was derived from https://codepen.io/soumyajitn/pen/VbqLew

Just to clarify, it wasnt' osgood_ who 'lifted' the original code from Codepen (without giving a credit or link, to the pen). It looks as though my only input was to correct the position of the lightbox js file for the OP.

Seriously though, you dont need to hook up an extra 16k file especially to do this, if you already have jQuery linked

Report · Jul 07, 2019

You don't need any extra CSS or JS code if you already use Bootstrap.

The code below will do what you want. Simply replace the thumbnails and full size images with your own.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Modal Gallery</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">
</head>
<body class="container">
<div class="jumbotron-fluid">
<h1 class="p2">Bootstrap 4 Modal Gallery</h1>
<p>This demonstrates how to combine the modal and carousel compoenents to create a simple photo gallery.</p></div>
<div class="row">
<ul class="list-inline text-center">
<li class="list-inline-item" data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img alt="description" class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br>
Caption</a></li>
<li class="list-inline-item" data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img alt="description"  class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br>
Caption</a></li>
<li class="list-inline-item" data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img alt="description"  class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br>
Caption</a></li>
<!--end of thumbnails-->
</ul>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content"> 
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">My Awesome Gallery</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body"> 
<!--INSERT CAROUSEL & FULL SIZE IMAGES HERE-->
<div id="myGallery" 
class="carousel slide bg-dark" data-ride="carousel"  data-interval="false" >
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="d-block mx-auto" src="https://placeimg.com/600/400/nature/1" alt="First slide">
<div class="carousel-caption">
<h5>First slide Heading</h5>
<p>First slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="https://placeimg.com/600/400/nature/2" alt="Second slide">
<div class="carousel-caption">
<h5>Second slide Heading</h5>
<p>Second slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="https://placeimg.com/600/400/nature/3" alt="Third slide">
<div class="carousel-caption">
<h5>Third slide Heading</h5>
<p>Third slide Caption</p>
</div>
</div>
</div>
<!--Previous & Next arrows-->
<a class="carousel-control-prev" href="#myGallery" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myGallery" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<small>Images courtesy of placeimg.com</small>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>Footer </h4>
<p class="small"> &copy; 2019 &middot; All Rights Reserved &middot; XYZ Website</p>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>
3

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 07, 2019

Problem l have is it is seriously bloated, you dont need to use all that code, well maybe if Bootstrap is involved but even with Bootstrap you can produce less code. If you strip out everyting apart from the images it would help as the OP only wanted a simple modal implementation.

I mean if you had a gallery of 60 images...........it would be 60 thumbnails and 60 carousel items, double what is really necessary.

Report · Jul 07, 2019

In production, I use PHP to populate the page with thumbnails and full sized images which cuts down on code significantly. But I don't think the OP is comfortable with server-side code yet. So I'm using an inline list of thumbnails + modal + carousel with full sized images.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 07, 2019

If the OP just wants a simple modal gallery, based on the default Bootstrap modal is could be as simple as below. Personally I would still remove all the Bootstrap classes and use 'external' css, to keep the code clean but in this insatnce I've tried to stick to the Bootstrap way, as much as possible. 2 folders are needed 1) for the thumbails 'thumb_fruits' and one for the larger images 'large_fruits'. The script will get the large images from the 'large_fruits' folder.

There is 8 image in the example as opposed to 3 in yours, so the code saving, if done manually, will be massive.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

<style>

body.modal-open .modal {

display: flex !important;

height: 100%;

}

body.modal-open .modal .modal-dialog {

margin: auto;

}

.modal-content {

position: relative;

}

.modal-header {

position: absolute;

top: -75px;

right: -10px;

border: none;

}

.thumbnails {

display: flex;

align-items: center;

height: 100vh;

}

.thumbnails img {

max-width: 100%;

height: auto;

margin: 0 0 20px 0;

}

.modal-body img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

</div>

</div>

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

</div>

$('.thumbnails img').click(function(){

var selectedImg = $(this).attr('src');

selectedImg = selectedImg.replace("thumb_fruits/", "large_fruits/");

$(".modal-body").html(`<img src="${selectedImg}">`);

})

</script>

</body>

</html>

Report · Jul 07, 2019

"You don't need any extra CSS or JS code if you already use Bootstrap."

I don't know how to quote replies here, but this ^^^ is what I was wondering in my original post. Thank you for saving me the aggravation of trying to reinvent the wheel!

The code you provided was just what I needed, thank you so much, Nancy!

Below is a link to my site so far (the Services and Contact pages do not yet exist), but I'm open to any suggestions on improvements.

gdrweldingllc.com

Report · Jul 07, 2019

You should remove inline styles from the <body> tag and move other styles from the <head> into a custom CSS file below Bootstrap CSS. It's' much easier to edit styles in one file instead of many different pages.

Mailto links are a bad practice because they promote spam and could potentially jeopardize the site owner's e-mail account and website. Always use a contact form with a secure backend script that thwarts spam, hides the e-mail address and sanitizes data.. If you can work with code, PHPMailer is a reliable library

GitHub - PHPMailer/PHPMailer: The classic email sending library for PHP

If you can't code, use a form service like Wufoo.com.

Online Form Builder with Cloud Storage Database | Wufoo

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 07, 2019

Thank you for your tips, Nancy. I moved the styles out of the header and will also take care of the email vulnerability issue. I had forgotten that using mailto was a bad idea!

I do have one more question about the modals/carousel, though. I've spent the past hour+ trying to figure out how to make the images in the carousel larger. I cannot for the life of me figure out what controls the size of the carousel image display. Is there a straight-forward way to make them larger?

Report · Jul 08, 2019

nancyfarlow wrote
how to make the images in the carousel larger?

Use some custom CSS.

.modal-dialog {

min-width: 98%;

margin: 5vh auto;

}

.modal-dialog .modal-content { min-height: 98vh; }

.carousel-item img { width: 100%; }

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 06, 2019

You can combine the Bootstrap modal and carousel components to create a single modal window that supports a gallery of images. I wrote a tutorial for Bootstrap 3. I haven't had time to update it for Bootstrap 4 yet.

Bootstrap Modal + Carousel Gallery - https://alt-web.com/

If you would prefer to automatically populate images to the page with PHP code, I have a Bootstrap 4 and Fancybox 3 demo for that. Some advanced coding skills required.

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

How do I get large images to display when thumbnails are clicked?

1 Correct answer