Menu
Working on this website:
[url]http://pcnetguard.com/nudim2017/
It is a free template that I grabbed from the Internet. I’m trying to figure out how to get the gallery thumbnails to open up their own independent set of images. Right now when you click on any of the images it just cycles through the same 6 pictures.
Any help would be appreciated.
Thanks
23 images , 2234 KB, takes 7.85 seconds to load.
9.+ seconds total load time.[/QUOTE]
My main thing is getting the gallery working. I can do with just one group of pictures (I'll just reduce the total and change them from time to time). I'd like to have say 4-6 thumbnails but 20-30 total pictures in the gallery. Is that possible with the galley script currently installed in the site?[/QUOTE]Yes, this is possible and the demo in my posting below shows how to do it.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/js/lightgallery.min.js"></script>
<script src="js/light.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/css/lightgallery.min.css" type="text/css">
<style>
.lg-backdrop.in{opacity:0.7}
</style>
</head>
>@Sempervivum#1591253 <style>
> .lg-backdrop.in{opacity:0.7}
> </style>
Fancybox 3 has the close button (X) in the top right corner. Is it possible to use that with multiple galleries?[/quote]I'm fairly shure that this is possible. Will check it tomorrow ...
is it possible to have the close X in the upper right corner of the picture[/quote]
<div class="lightgallery">
<a data-fancybox="gallery1" id="lgitem-1" href="my-image-1.jpg">
<img src="my-image-1.jpg" />
</a>
if the images are in the same folder as the html file.<div class="lightgallery">
<a data-fancybox="gallery1" id="lgitem-1" href="images/my-image-1.jpg">
<img src="images/my-image-1.jpg" />
</a>
if the images are in the folder "images". <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen">
<a data-fancybox="gallery1" id="lgitem-1" href="gallery/exterior/e1.jpg">
<a rel="gallery1" id="lgitem-1" href="gallery/exterior/e1.jpg">
$('[rel^="gallery"]').fancybox({
transitionDuration: 500,
transitionEffect: "slide",
smallBtn: "true"
});
$("img[data-lightgallery]").on("click", function() {
var id=$(this).data("lightgallery");
$("#" + id).trigger("click");
});