Develop Reference

How to show future images actual size when click

When I run the code only the first image is showing on click and when I click others, the first image will be the one to show.
var modal = document.getElementById("myModal");
function my(course) {
var img = document.querySelectorAll('#myDiv img')[0];
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = '<?php echo $image[0] ?>';
captionText.innerHTML = "future Ad full image";
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
}
<div class="item <?php if($i == 0 ) echo 'active'; ?>" id="myDiv"><img onClick="my(this);" class="myImg" id="my" style="height:400px; object-fit: cover;" src="<?php echo $image[0] ?>"></div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
When i run the code only the first image is showing on click and when i clik others the first image will be the one to show. have try my best please i need help

Adding javascript buttons to a Modal (javascript newbie)

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>

Modal images have troubles with classes

I got this modal script to display bigger images on my site. It worked well, but only with 1 image. When i tried to add more images - script didn't worked, and nothing was happening. Can someone tell me what am I doing wrong?
Here's some code:
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName("zdjecie");
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";
}
<img class="zdjecie" style="max-height: 16rem;max-width: 16rem;" src="example.jpg">
When I was using ID's instead of classes it worked well - but i couldn't add more images - that's why i need to use classes. Someone has any ideas? I'd be greatful

The document.getElementsByClassName returns an array, which contains all the dom has the zdjecie class.
So you have to loop through this array to add the event, or put these images inside a container and use event-delegation, which is a more efficient way. Because it just bind event once. More about event-delegation: https://javascript.info/event-delegation`
Here is the code using event-delegation.
var handleImageClick = function(evt){
if(evt.target.className.indexOf('zdjecie') === -1) return;
modal.style.display = "block";
modalImg.src = evt.target.src;
captionText.innerHTML = evt.target.alt;
}
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modal = document.getElementById("myModal");
var imageContainer = document.getElementById("imageContainer");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
imageContainer.addEventListener('click', handleImageClick)
// 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";
}
.zdjecie{
background-color: yellow;
width: 100px;
height: 100px;
display: inline-block;
}
<div id="imageContainer">
<img class="zdjecie" alt="1" style="max-height: 16rem;max-width: 16rem;" src="example1.jpg" />
<img class="zdjecie" alt="2" style="max-height: 16rem;max-width: 16rem;" src="example2.jpg" />
<img class="zdjecie" alt="3" style="max-height: 16rem;max-width: 16rem;" src="example3.jpg" />
<img class="zdjecie" alt="4" style="max-height: 16rem;max-width: 16rem;" src="example4.jpg" />
</div>
<div id="myModal">
<span class="close">x</span>
<img id="img01" style="max-height: 16rem;max-width: 16rem;" />
<p id="caption"></p>
</div>

Dynamic image in modal view with javascript in Laravel 5.2

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.

Modal pop-up only works on one image:

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.