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.
Related
I have created series of button in table field. Now, since the id for all the button is same I want the modal is work for all the button but it is working only for the first button.
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("mbutton");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
while ($row = $result->fetch_assoc()) {
$sl++;
echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td><td>"."<button id='mbutton'>Pay</button><button id='mbutton'>Report</button>"."</td></tr>";
}
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Pay to</h2>
</div>
<div class="modal-body">
<form>
<label>Payment Amount</label><br>
<input type="text" name="paymodal" placeholder="Amount"><br>
<input type="submit" name="smitModal">
</form>
</div>
</div>
id is unique attribute value for each element so that the document will only get the first element with corresponding id. You can use class instead.
var btn = document.getElementsByClassName("mbutton");
First of all, The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). So should never put same ID for every button.
If you use Jquery, you can try the answer above by Minh Duc, if not, please try to bind onclick to every button, or to the column contain it (because JS event is bubbling). You can try like this with your PHP code:
while ($row = $result->fetch_assoc()) {
$sl++;
echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td>
<td onclick="onclickHandler()">"."<button onclick="onclickHandler()" id='mbutton'>Pay</button><button onclick="onclickHandler()" id='mbutton'>Report</button>"."</td></tr>";
}
And at your script file, add:
function onclickHandler () {
modal.style.display = "block";
}
By this way the modal will display whenever you click any button in your table
In javascript portion of my code i'm first using id.Than when #Minh suggest to use class, i have use it and it's become an array which need to be indexing.
Instead all of these i'm just calling the function from button all the time(Which i don't think before asking the question)
<button id='mbutton' onclick=btn()>Pay</button>
and
function btn() {
modal.style.display = "block";
}
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
});
In my website I have a problem with my modal. It is supposed to be triggered by an icon appearing close to the embed tags. Although it works to activate the modal, it just displays the modal-content without anything in it; after closing the modal and making a second click on the openModal() function the wanted embed file is displayed. Then when clicking another document it displays the preceding document until closed and clicked again. Why is this happening and what should I do to fix it?
HTML (but with only one embed) :
<div class = "overlay-cont">
<embed src="link-to-pdf.pdf" >
<div class = "overlay">
<img class = "enlarge-icon" src = "arrow-icon.svg" onclick ="openModal(0)">
</div>
</div>
<div id = "myModal" class = "modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<embed id = "currentDoc">
</div>
</div>
JavaScript:
var doc = document.getElementsByTagName("EMBED");
function openModal(n){
document.getElementById("myModal").style.display = "block";
document.getElementById("currentDoc").src = doc[n].src;
}
function closeModal(){
document.getElementById("myModal").style.display = "none"
}
Instead of having a static embed element and giving it dynamic src attribute value, generate dynamic embed element every time you show the modal and remove it every time you close the modal.
var doc = document.getElementsByTagName("EMBED");
function openModal(n) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
var node = document.createElement("embed");
var src_attr = document.createAttribute("src");
src_attr.value = doc[n].src;
node.setAttributeNode(src_attr);
modal.appendChild(node);
}
function closeModal() {
var e = document.querySelectorAll("embed")[1];
e.parentNode.removeChild(e);
document.getElementById("myModal").style.display = "none"
}
<html>
<head>
</head>
<body>
<div class="overlay-cont">
<embed src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="overlay">
<img class="enlarge-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" onclick="openModal(0)">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
</div>
</body>
</html>
I have an image and I would like the modal to be displayed when the image is clicked. The modal has a display of "none" initially.
Here is the (very simple)modal.
<div id="modal" style="background-color: #000;"> <!--MODAL---->
<span id="close">×</span>
</div>
<img id="image" src="agave.jpg"/> <!--Click to display modal-->
This seems simple enough, why isn't it working?
var img = document.getElementById("image");
function displayModal(event){
var modal = document.getElementById("modal");
if(modal.style.display == "none"){
modal.style.display = "block";
}
else{modal.style.display = "none";}
}
img.addEventListener("click", displayModal(event));
It should be: (pass the function itself as the second argument)
img.addEventListener("click", displayModal);
This would pass the result of the function as second argument
img.addEventListener("click", displayModal(event),);
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.