Dynamic image in modal view with javascript in Laravel 5.2 - javascript

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.

Related

Modal Image Issue in JavaScript

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>

Trying to loop through id's with php and on click to get a modal popup

I have multiple product cards that are being looped by php. I want to add an onclick to the card where a modal pops up. I tried
HTML
<div id="sbf-user-image" class="open-lightbox">
<img id="user-image<?php echo $count ?>" src="DEMO"
onError="this.onerror=null;this.src='DEMO';" alt="test" />
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">CLOSE</span>
<img class="modal-content" id="img01" src="DEMO"
onError="this.onerror=null;this.src='DEMO';" alt="test" />
<div id="caption"></div>
</div>
Script
var img = document.getElementById("user-image<?php echo $count ?>");
var modalImg = document.getElementById("img01");
img.onclick = function(){
console.log("testing image loop")
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
This script above isn't working so I tried just to see if it would hide or do anything at all with the following code and it did. Any idea how i can implement the img.onlick above into this click below?
$('.open-lightbox').on('click', function test(){
$(this).find('img').hide();
});
I think there is something wrong with your $count, cause I tested this code and while I define $count at the top of code , img.onclick works properly and console logs : "testing image loop".
Anyway if you want to do it in the other way,you may do it like this :
var imageElem = $('.open-lightbox').find('img');
$(imageElem).on('click', function test(){
console.log("testing image loop");
//and the rest of your code
});

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>

Img modal only opening first img

I am trying to list multiple images on a page with the below, whereas when you click the image it opens in modal.
It is working for the first image but no others, I am assuming it's a JS issue, I've tried setting an empty var then setting it to get the element id (which is the same for each img) but again only the first works.
<?php foreach ($img as $thumbnail) {
echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200">
<div id="imgModal" class="modal">
<span class="closeModal">×</span>
<img class="modal-content" id="myImg1">
<div id="caption"></div>
</div>
<span class="closeModal">×</span>';
}
?>
<script>
var modal = document.getElementById('imgModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("myImg1");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
var span = document.getElementsByClassName("closeModal")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
Your code includes the same id attribute for different elements but id must be unique.
id attribute specifies a unique identifier for an HTML element so you can manipulate it via JS or CSS. If you are using the same id for different elements you will only get the first one on the page.
If you want to add event listener to multiple elements add a class to your <img>:
echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200" class="modal-img">
And after that add event listener for every element with a class modal-img.

Categories

Resources