CODEWITHSUNDEEP
javascriptphphtmlmodal-dialog
Bernardy Gosal
Bernardy Gosal

Reputation: 37

modal image function only show the first image from the database for all other divs

so i want to make each thumbnail image shows up its own large detail image. I got it worked before using simple "active" element from CSS. But now i want to try displaying in a modal box/image. So here is my html code for displaying the thumbnail images.

<div id="product-image" ><img id="product-thumbnail" src="<?php echo $row["image"]; ?>" onclick="openDetail()">
    <?php $hoverimg = $row["hover-img"]; ?>
    <span id="span-img"><img id="hover-img" src="<?php echo $hoverimg ?>"><span class="close">&times;</span></span>
</div>

by clicking the "img id="product-thumbnail", i can get to display modal image from "span". But the problem at hand is that i can click and display span element for every "img" but the span-img are all the same even on other product thumbnails. When i try to inspect in browser every span-img direct to the correct src. Which leads me to question my JS code. Here is my script

function openDetail() {
var img = document.getElementById("span-img");
img.style.visibility = "visible";

Any help will be appreciated -- Thanks

Upvotes: 0

Views: 146

Answers (1)

spyro95
spyro95

Reputation: 146

<div id="product-image_<?php echo $i; ?>" ><img id="product-thumbnail_<?php echo $i; ?>" src="<?php echo $row["image"]; ?>" onclick="openDetail()">
    <?php $hoverimg = $row["hover-img"]; ?>
    <span id="span-img_<?php echo $i; ?>"><img id="hover-img_<?php echo $i; ?>" src="<?php echo $hoverimg ?>"><span class="close">&times;</span></span>
</div>

ID must be unique. If you want to style your div or something else, use classes instead (also possible with partial string match).

Upvotes: 0

Related Questions