Exception or error:
I’m trying to display images from my database with baguetteBox.js The problem is, baguetteBox works with <a> tags, but I display the images with <img> tags. I insert them in mediumblob to my database, and I don’t have them in any folders.
So, here’s the working baguetteBox:
<div class="card-buttons">
<a href="1.jpg">
<div class="kepek">
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">Képek</button>
</div>
</a>
<a href="2.jpg"></a>
</div>
and here’s the working image listing:
<?php
$sql = "SELECT id FROM cardimages ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result)) {
?>
<img src="imageView.php?image_id=<?php echo $row["id"]; ?>" /><br/>
<?php
}
mysqli_close($conn);
?>
but with this one, I can’t see any image:
<div class="card-buttons">
<a href="1.jpg">
<div class="kepek">
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">Képek</button>
</div>
</a>
<a href="2.jpg"></a>
<?php
$sql = "SELECT id FROM cardimages ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result)) {
?>
<a href="imageView.php?image_id=<?php echo $row["id"]; ?>"></a>
<?php
}
mysqli_close($conn);
?>
</div>
How to solve:
You need to use an <img> tag inside the <a> element that baguetteBox needs in order to trigger the lightbox. A link element will never display an image See the second example on their homepage
So replace this line in your php file:
<a href="imageView.php?image_id=<?php echo $row["id"]; ?>"></a>
with something like this (I’m assuming.. you might need to edit it some)
<a href="imageView.php?image_id=<?php echo $row["id"]; ?>">
<img src="imageView.php?image_id=<?php echo $row["id"]; ?>" />
</a>