How to add multiple images within a modal

Marizanne · August 12, 2017

Not sure if I worded that right.

I am trying to ad a modal to our page. Eventually it will need to be more than one modal but one problem at a time.

I am struggling to add multiple images in a modal where visitors can just click on the image and it will enlarge and they can scroll through them. Instead what happens is it gives me the images but no option to click on an arrow which means every image has to opened separately. Can someone help me please as I am not managing with google.

This is the coding I found on W3Schools. I just copied and pasted it like I found it and just put my image tag in. I just can't figure out how to add more images.

<!-- Trigger the Modal -->
<img id="myImg" src="img/t1.jpg" alt="Tinkerbell Party" width="300" 
height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close" 
onclick="document.getElementById('myModal').style.display='none'">&times;
</span>

<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">

<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>


<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
    width: 100%;
}
}
</style>
</head>
<body>

<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a 
caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}
</script>

</body>
</html>

Marizanne · August 17, 2017

A little bump to the top hopefully

dsonesuk · August 17, 2017

So you want, slideshow of images in modal, with slideshow image of the one you selected, plus the other group images associated with that image, with left/right navigation?

Marizanne · August 20, 2017

Hi, yes please. That is exactly what I want. But it doesn't give me a navigation arrow and I'm unsure of how to add that coding.

dsonesuk · August 20, 2017

Then you need to add slideshow to modal https://www.w3schools.com/howto/howto_js_slideshow.asp

But im afraid its going to be more complicated than just that, as you have use JavaScript to bring up the image you selected when modal appears. Also i foresee conflicting problems using multiple modals with slideshows and even more complicated code.

Marizanne · August 21, 2017

Thank you. I will try that.

I already have the slide show banner at the top of the page though. Was a mission on its own.

If I can try and explain why I need the different modal slide shows it is for our kiddies party venue page and it is to show the different themes of decorations. Just worried the slide shows will be a bit clunky on the page. But I will try it if that is the easier option of the two.

Thanks.

EDIT:

Tried to edit the original post but can't for some reason.

I found this coding which is exactly what I want. Only issue for some reason is it shows the images underneath one another.

  <div class="container text-center">

<h1> Click Me </h1>
<!-- Large modal -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Tinkerbell</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
     <img class="img-responsive" src="img/t1.jpg" alt="...">
      <div class="carousel-caption">
        One Image
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="img/t2.jpg" alt="...">
      <div class="carousel-caption">
        Another Image
      </div>
    </div>
     <div class="item">
      <img class="img-responsive" src="img/t3.jpg" alt="...">
      <div class="carousel-caption">
        Another Image
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
    </div>
  </div>
</div>
</div>

Found it here. https://bootsnipp.com/snippets/featured/carousel-inside-modal

Attached is the image of what happens on the page.

Edited August 21, 2017 by Marizanne

dsonesuk · August 21, 2017

Did you also download and add links to css, JavaScript required to style and make it work?

Marizanne · August 22, 2017

I did yes.

But I have no idea where to add that in or where to put it. That is a bit above my skill level.

I have tried to just put it at the bottom of the code (obviously didn't work) and to look for a css tag in the code itself but couldn't find anything.

I managed to then locate a css at the bottom of the page underneath the footer of what I assume is the original code of the site and then tried to put it in there but it also didn't work.

No sure if I even did it right to begin with.

dsonesuk · August 22, 2017

This is what it should be or similar to

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div class="container text-center">

            <h1> Click Me </h1>
            <!-- Large modal -->
            <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">



                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="img-responsive" src="http://placehold.it/1200x600/555/000&amp;text=One" alt="...">
                                    <div class="carousel-caption">
                                        One Image
                                    </div>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&amp;text=Two" alt="...">
                                    <div class="carousel-caption">
                                        Another Image
                                    </div>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&amp;text=Three" alt="...">
                                    <div class="carousel-caption">
                                        Another Image
                                    </div>
                                </div>
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

You maybe using different version of bootstrap, jquery and obviously the images are different. CSS styling goes between <head>...</head> (unless placed inline to element themselves. JavaScript can go in with css in <head> or within body element, but any element, element class or id, must exist before JavaScript references them. That is why it is norm to place JS LINKS at bottom of page before </body>, so as page is read from top to bottom, the html with id and classes are rendered first, and JavaScript loaded last can reference them with no problems, plus it helps renders the whole page quicker.

Edited August 22, 2017 by dsonesuk

Marizanne · August 22, 2017

Thank you so much.

I am really learning a lot.

I am actually not using Bootstrap, I am using notepadd++. It is the only way I know how.

Does that make a difference to the coding you gave me? I did try it but it didn't work.

This is what happened.

Sorry for taking up so much of your time, but I really do appreciate all your help.

It basically removed my slide show at the top and then the drop down menu that is now down without even hovering over it.

Edited August 22, 2017 by Marizanne

dsonesuk · August 22, 2017

Bootstrap is NOT a editor, its a framework of predefined classes, JavaScript that is used to style, and manipulate elements (example modal, sideshow) so it works! in a responsive manner.

IF you look at links at top with bootstrap, they are linking externally to these files, same with jquery.

I see you are opening the file directly from O/S filesystem, and not on local server wamp or xamp, then that could be problem, if linking to bootstrap and jquery externally. These files have to be downloaded to specific location, especially when linking to glyph icons in fonts folder.

Edited August 22, 2017 by dsonesuk

How to add multiple images within a modal

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in