Anonymous

Answered

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

Forum|Forum|6 years ago
July 6, 2019
2 replies
4061 views

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?

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Community Expert

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

osgood_

Legend

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.

Anonymous

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?

Anonymous

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

"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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded