Преобразовать тег img в тег a для работы с лайтбоксом

Поэтому я пытаюсь использовать плагин LightBox. Однако я запрашиваю мою базу данных mysql и отображаю ее с тегом img. Но мне кажется, что LightBox требует тег "a". Кто-нибудь знает, как это сделать?

echo '<img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" />';

Я пытался:

echo '<a id="database" href="data:image/jpeg;base64,'. base64_encode($image) .'" />';

но ничего не появляется, если я делаю это. В противном случае, используя тег img, все отображается нормально.

Дополнительная информация: Если это поможет, я храню изображения в виде BLOB-объектов в базе данных MySQL.
Спасибо

Обновление 1:

echo '<a href="data:image/jpeg;base64,'. base64_encode($image) .'"  data-lightbox="roadtrip"> <img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" /><a/>';

Это изображение теперь связано с самим собой, что здорово! Но все еще не подходит для функциональности Lightbox. Как настроить лайтбокс в соответствии с инструкциями:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script src="/var/www/html/jquery-1.11.3.min.js"> </script>


<title>Greeting Cards</title>

<link rel="stylesheet" href="/var/www/lightbox2-master/dist/css/lightbox.css">

</head>

<body>

<!--------Logo------------>
<div id="logo">
<a href="../../index.html" >
<img src="../../icon/icon.png" alt="Our logo picture" >
</a>
</div>
<!------------------------>

<h2>Greeting Cards</h2>

 <!-------->
<?php
 /* Getting the blobs from mysql database */

echo '<div id ="gallery">';

foreach ($images as $image) {
  $image = WideImage::loadFromString($image)->resize(300, 300); //image resizing here

  echo '<a href="data:image/jpeg;base64,'. base64_encode($image) .'"  data-lightbox="roadtrip"> <img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" /><a/>'; 
}
echo '</div>';

mysqli_close($con);

?>

<script src="/var/www/lightbox2-master/dist/js/lightbox.js"> </script>

</body>
</html>

Источник

2 ответа

echo '<a href=""#><img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" /><a/>'; Кредит Майку Филсу.

Это сработало! И не забудьте правильно связать все ваши файлы плагинов! Надеюсь, это кому-нибудь поможет.

Источник

Lightbox не поддерживает base64-строки в теге href. В этой теме есть несколько предложений по использованию data-remote: лайтбокс с тэгами или ;

Помимо этого есть и другие альтернативы, такие как Fancybox, это можно найти здесь: http://fancybox.net/

Источник
Другие вопросы по тегам