使用 baguettebox 显示数据库中的图像

Question

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>

Answer 1

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>