Jump to content

Marizanne

Members
  • Content count

    6
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Marizanne

  • Rank
    Newbie
  1. How to add multiple images within a modal

    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.
  2. How to add multiple images within a modal

    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.
  3. How to add multiple images within a modal

    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.
  4. How to add multiple images within a modal

    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.
  5. How to add multiple images within a modal

    A little bump to the top hopefully
  6. 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>
×