0
Я создал простую веб-страницу, которая будет отображать изображения через плагин галереи. После очень простой реализации страница отображается без вывода, где должна присутствовать галерея.реализация bluimp Gallery - HTML или JS rendered
Я использую blueImp галерею, и следовал инструкциям по установке здесь - насколько https://github.com/blueimp/Gallery#description
всех соответствующих CSS «настроек», JS и IMG каталоги были объединены в каталоге веба-странице.
разметки ниже:
<!DOCTYPE html>
<html>
<head>
<script src="js/blueimp-gallery.min.js" async></script>
<script src="js/bootstrap.min.js" async></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script>
<script src="js/script.js" async></script>
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="main">
<div class="navbar-wrapper" style="border: 12px solid black;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Wilhelm Reich</a></li>
</ul>
</div>
<br>
<br>
<br>
<br>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<a href="img/1.jpg" title="LittleMan"></a>
<a href="img/2.jpg" title="LittleMan"></a>
<a href="img/3.jpg" title="LittleMan"></a>
</div>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
</body>
</html>