Эффект лайтбокса в HTML - PullRequest
Новая
       9

Эффект лайтбокса в HTML

0 голосов
/ 26 февраля 2019

Я пытаюсь отредактировать свой код JavaScript, чтобы включить лайтбокс при нажатии на изображение.В настоящее время он открывает изображение в другой вкладке.Я искал в Интернете, но, похоже, не смог найти ответ .. 

<script language="JavaScript">
$(function() {
  /* Lets the user click on the images to view them in full resolution. */
  $("img").wrap(function() {
    var link = $('<a/>');
    link.attr('href', $(this).attr('src'));
    link.attr('title', $(this).attr('alt'));
    link.attr('target', '_blank');
    return link;
  });
});
</script>

<img src="img/4_email_a.png" style="border: #A9A9A9 1px solid; width:70%">

Может ли кто-нибудь указать мне правильное направление?Спасибо!

1 Ответ

0 голосов
/ 27 февраля 2019

Вы должны использовать скрипт лайтбокса, например fancybox (https://fancyapps.com/fancybox/3/),, вам просто нужно добавить data-fancybox атрибуты для ваших ссылок, например:

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

Также возможно заставить его работать без ссылок - https://codepen.io/anon/pen/rRVeJW

...