I have an XSLT template which populates a list of thumbnail images, and I want to create a modal popup for each image in a similar way.
<xsl:template name="Gallery-View">
<div class="gallery-images">
<!--<ul class="hoverbox">-->
<xsl:for-each select="//Gallery/Images[#folderpath = 'thumb/']">
<xsl:variable name="path" select="#filename"/>
<xsl:variable name="title" select="#title"/>
<!-- Trigger the Modal -->
<img id="myImg" src="Images/Gallery/thumb/{$path}" alt="{$title}"/>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'"><i class="pe-7s-close"></i></span>
<!-- Modal Content (The Image) -->
<img class="modal-content" src="Images/Gallery/full/{$path}" alt="{$title}" id="img01"/>
<!-- Modal Caption (Image Text) -->
<div id="caption">
<xsl:value-of select="$title"/>
</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";
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>
</xsl:for-each>
</div>
</xsl:template>
The problem I'm having is that the modal popup only works on the first image, and if I click on any of the other images I don't even get a console error to tell me where I'm going wrong, just nothing.
It seems that you need an additional variable since image id cannot be the same for every thumbnail. If you will look at the generated HTML, my guess is that each image will have the same id = myImg. So your script is working only for the first image that it encounters with id myImg.
Each thumbnail to be clicked needs to have a different id.
You are correct when you say that there is no console error. Javascript doesn't throw any error when multiple HTML elements are assigned the same id because it doesn't need to.
Related
I'm trying to include an image modal into my photo gallery. I've been trying to work with a version of this example:
http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/howto/howto_css_modal_images.asp.html
The example only works with one image since it accesses the image through its ID. I've tried to modify it and just have it access the image through its class. But that doesn't work. How would I have to modify the JS code to make it work with any image in a gallery?
Thank you!!!
Modified code:
HTML:
<img class="galleryPic" src="assets/images/test images/globes.jpg" alt="Old globes" width="300" height="200">
<img class="galleryPic" src="assets/images/test images/palmtrees.jpg" alt="Palmtrees in front of the evening sky" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
JS:
// 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.getElementsByClass('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
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";
}
There is not such thing as document.getElementsByClass(), there is document.getElementsByClassName() which returns a list of elements if found.
So you'll need "loop" through the list:
// 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 imgs = document.getElementsByClassName('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
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";
}
<img class="galleryPic" src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj" alt="Old globes" width="300" height="200">
<img class="galleryPic" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" alt="Palmtrees in front of the evening sky" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
I am using a Modal view to display image in popup view, but there is no scroll feature and I want to add it, can anyone help with code?
Script:
<script>
// Get the modal
var modal3 = document.getElementById('myModal3');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img3 = $('.myImg3');
var modalImg3 = $("#img03");
var captionText3 = document.getElementById("caption3");
$('.myImg3').click(function(){
modal3.style.display = "block";
var newSrc3 = this.src;
modalImg3.attr('src', newSrc3);
captionText3.innerHTML = this.alt;
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("clos")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal3.style.display = "none";
}
</script>
HTML:
<img style="height:100px;" class="myImg3" src='<?php echo "uploads/" . $patient_pre['img_url']; ?>'>
<!-- The Modal -->
<div id="myModal3" class="modal">
<!-- The Close Button -->
<span class="clos" onclick="document.getElementById('myModal3').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img03">
<!-- Modal Caption (Image Text) -->
<div id="caption3"></div>
</div>
Thanks in advance.
Try to add overflow-y: auto; to the modal's body:
<div id="myModal3" class="modal" style="overflow-y: auto;">
I'm new to java-script and really programming, I'm able to read and understand whats going on but writing code is another issue. It drives me crazy I can't figure out some buttons. Does anyone have any recommendations on how to get these modals some buttons?
<div>
<!-- Trigger the Modal -->
<a img id="myImg30" src="homefiles/a (30).jpg" alt="Snow" style="width:100%;max-width:300px"></a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</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 () {
}
</script>
I am making a portfolio website and want to have a table with previous projects I've worked on. The idea is to have a grid of thumbnails and when you click the image, a modal opens with the project in PDF. Everything is working out, except I cannot close the modal. The script for closing the modal was working before, but I'm not sure what happened. Neither the 'X' nor clicking outside the window are working. Any ideas?
<td><!-- AGNES HAMERLIK PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="agnes"><img src="../images/projectImages/agnes_thumbnail.png" height="250" width="auto" alt="Agnes Hamerlik Thumbnail"></button>
<!-- The Modal -->
<div id="agnesModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/AgnesHamerlikPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Agnes Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var agnesModal = document.getElementById("agnesModal");
// Get the button that opens the modal
var agnesBtn = document.getElementById("agnes");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
agnesBtn.onclick = function() {
agnesModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
agnesModal.closeModal();
//agnesModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == agnesModal) {
agnesModal.style.display = "none";
}
}
</script>
</td>
<td><!-- VAN DOREN PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="vandoren"><img src="../images/projectImages/vandoren_thumbnail.png" height="250" width="auto" alt="Van Doren Thumbnail"></button>
<!-- The Modal -->
<div id="vandorenModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/VanDorenPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Van Doren Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var vandorenModal = document.getElementById('vandorenModal');
// Get the button that opens the modal
var vandorenBtn = document.getElementById("vandoren");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
vandorenBtn.onclick = function() {
vandorenModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
vandorenModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vandorenModalModal) {
vandorenModal.style.display = "none";
}
}
</script>
</td>
</tr>
<tr>
<td><!-- Platinum Sales Group Project -->
<!-- Trigger/Open The Modal -->
<button id="psg"><img src="../images/projectImages/psg_thumbnail.png" height="250" width="auto" alt="Platinum Sales Group Thumbnail"></button>
<!-- The Modal -->
<div id="psgModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/psgFINAL.pdf" type="application/pdf" width="100%" height="400" alt="Platinum Sales Group Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var psgModal = document.getElementById('psgModal');
// Get the button that opens the modal
var psgBtn = document.getElementById("psg");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
psgBtn.onclick = function() {
psgModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
psgModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == psgModal) {
psgModal.style.display = "none";
}
}
</script>
</td>
I need a little advice to display images dynamically.
I am currently using this script from an example of W3Schools:
http://www.w3schools.com/howto/howto_css_modal_images.asp
Here is the script:
<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("img");
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>
#foreach($properties->files as $file)
<div class="col-md-6 thumb">
<a class="thumbnail">
<img id="myImg" src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->name }}" width="300" height="200">
</a>
</div>
<div id="myModal" class="modal">
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<img class="modal-content" id="img">
<div id="caption"></div>
</div>
#endforeach
I need to display the images that are displayed dynamically in the thumbnail, because only the first image in the list is showing.
In the view the images are shown like this:
The first image is displayed in a modal view, but the second does not:
This is my show method in Propertycontroller:
Public function show ($ id)
{
$ Properties = Property :: find ($ id);
$ Files = File :: where ('property_id', $ properties-> id) -> get ();
Return view ('properties.show', compact ('properties', 'files'));
}
This requirement is related to:
Show image file by id in Laravel 5.2
How can I display the images in the modal view when clicking them?
It's showing only first image because your id will be same for all images. Use for loop index to give unique id to img tag like below :
#foreach($properties->files as $index=>$file)
<div class="col-md-6 thumb">
<a class="thumbnail">
<img id="myImg<?php echo $index ?>" src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->name }}" width="300" height="200" onclick="showImage(this,<?php echo $index ?>)">
</a>
</div>
#endforeach
showImage() function will pass the unique $index to your script and do the thing.
<script>
function showImage(element,i){
// 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'+i);
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = element.src;
captionText.innerHTML = element.alt;
}
</script>
similarly you can set closing the modal logic. I hope this help you.