/    Sign up×
Community /Pin to ProfileBookmark

LightGallery help

Working on this website:

[url]http://pcnetguard.com/nudim2017/[/url]

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

to post a comment

48 Comments(s)

Copy linkTweet thisAlerts:
@jedaisoulSep 29.2017 — Hi and welcome to the site.

Sorry, but the web page took too long to load, so I crashed out. I would suggest that you need to sort out the dire load time before worrying about what it would display if anyone waited that long! ?
Copy linkTweet thisAlerts:
@Scrif2016authorSep 29.2017 — Really? It works fine for me. Tried from a few different geographical locations.
Copy linkTweet thisAlerts:
@TrainSep 29.2017 — Load time, - 10+ seconds.

23 images , 7.3 MB take 9+ seconds to load

HTML- 2 errors

https://validator.w3.org/nu/?doc=http%3A%2F%2Fpcnetguard.com%2Fnudim2017%2F

CSS Errors (116)

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpcnetguard.com%2Fnudim2017%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

I use Firefox. Opened your site, hit F12, which opens web developer to console and seen errors, then select Network and did the performance analysis and seen the time and sizes I listed.

If the internet is busy all kinds of weird things can happen.
Copy linkTweet thisAlerts:
@Scrif2016authorSep 30.2017 — Ok. Thanks. I'll try and correct the errors. 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?
Copy linkTweet thisAlerts:
@SempervivumSep 30.2017 — Check if this demo does what you require:

https://jsfiddle.net/Sempervivum/ta8kqktg/5/
Copy linkTweet thisAlerts:
@Scrif2016authorOct 01.2017 — Here is the original Website with no changes. Would you mind testing it to see if you get the same errors and slowness?

http://pcnetguard.com/Infinity/Infinity10/
Copy linkTweet thisAlerts:
@TrainOct 01.2017 — 23 images , 2234 KB, takes 7.85 seconds to load.

9.+ seconds total load time.
Copy linkTweet thisAlerts:
@Scrif2016authorOct 01.2017 — 23 images , 2234 KB, takes 7.85 seconds to load.

9.+ seconds total load time.[/QUOTE]


Thanks. So it did load completely? Didn't crash or hang. Must be something I messed up when I started changing the original template.
Copy linkTweet thisAlerts:
@TrainOct 01.2017 — Loaded fine for me. just slower than you want it to be.

You need to read this.

https://blog.kissmetrics.com/loading-time/
Copy linkTweet thisAlerts:
@SempervivumOct 01.2017 — 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.
Copy linkTweet thisAlerts:
@Scrif2016authorOct 01.2017 — Thanks for all the info everyone. Much appreciated.

A bit about me - Im not a web developer/designer by trade - this is just a hobby - but I am willing to learn. I have signed up for (and started) a Udemy course.

Re: The Website - Interestingly, I found another, similar copy of the site I used as my starting template that has a lot less stuff done to it (https://startbootstrap.com/template-overviews/stylish-portfolio/) so I'm going to modify that one slightly and see if I get the same issues (hopefully not).

Again - thanks for the help thus far. I'm sure I'll be asking more questions soon!
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — @Sempervivum#1517321

Hi,

You responded to a post about multiple galleries in a single page a while ago (https://www.webdeveloper.com/forum/d/366243-lightgallery-help/4). Your example is exactly what I need I just can't seem to get it working. I can get the main pictures to come up but nothing happens when I click them.

Here is my test page - http://pcnetguard.com/test5/
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — Do you mean this fiddle?

https://jsfiddle.net/Sempervivum/ta8kqktg/5/

Unfortunately the images are broken.

If it doesn't work for you, the best would be posting the URL of your page so that one can see it in action.

Note that this code loads the gallery script from a CDN, thus it requires an internet connection to work.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — Yep. Thats the one I mean. (the fiddle). I created a site using the example.

http://pcnetguard.com/test5/

Images are there but nothing happens on click.
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — It doesn't work as you did not include the lightgallery javascript and CSS. You need:

https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/js/lightgallery.min.js

https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/css/lightgallery.min.css

Additionally js/light.js is not found - error 404. What is this script for?
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — light.js is the java script file that I created with the following code:

$(".lightgallery").lightGallery();

$("img[data-lightgallery]").on("click", function() {

var id=$(this).data("lightgallery");

$("#" + id).trigger("click");

});

I see the file under the JS directory on my webserver
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — I see. You include this script like this:

<script src="/js/light.js"></script>

This will look up the directory js in the root directory of your webspace. In order to load it from the current one, you need to omit the leading slash:

<script src="js/light.js"></script>
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — @Sempervivum#1591245

Ok. Fixed (removed leading /). Still doesnt seem to work.
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — Your script needs lightgallery to execute correctly. Place it below the lightgallery script:
&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/js/lightgallery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/light.js"&gt;&lt;/script&gt;
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — That fixed it! Thanks VERY much!!!
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — Is it possible to have the slideshow as a pop-up rather than full screen?
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — Not shure what you mean when writing "pop-up":

Should the page's content be visible when the lightbox is open? I guess this should be easy by modifying the CSS.

Should the pop-up be resizable and draggable? This would be a lot more complex.

Have a look at fancybox if it meets your whish:

http://fancyapps.com/fancybox/#examples
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — Yes. I'd like the websites contents to still be visible like in the example you sent when the image pops up and the website is faded but still visible.
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — Place this CSS in the head, below the CSS of lightgallery:
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/css/lightgallery.min.css" type="text/css"&gt;
&lt;style&gt;
.lg-backdrop.in{opacity:0.7}
&lt;/style&gt;
&lt;/head&gt;
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — Great! Thanks! I'll add the gallery now to my main website and see how it looks/works.

Appreciate all the help!
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — > @Sempervivum#1591253 <style>

> .lg-backdrop.in{opacity:0.7}

> </style>


Why do I have to have this in my main html? I tried adding it to my main css but it didnt take. And is it possible to have the close X in the upper right corner of the picture )not the upper right corner of the browser).
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — No, you need not place it in the main html, however you need to place it after the CSS of lightgallery.

I. e. place the inclusion of your theme.css after that one of the CSS of lightgallery.

I'm gonna look into the position of the close button, however I'm afraid modifying it is more complex.
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — Changing the position of the close button indeed is a bit more complex and I do not recommend doing so. Again I had a look at Fancybox 3 but the button is in the top right corner either, thus it is no alternative for you.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 16.2018 — Fancybox 3 has the close button (X) in the top right corner. Is it possible to use that with multiple galleries?
Copy linkTweet thisAlerts:
@SempervivumApr 16.2018 — 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 ...

However, earlier you posted:
is it possible to have the close X in the upper right corner of the picture[/quote]
Fancybox 3 has the close X in the upper righht corner of the browser window; Fancybox 2 has it in the upper right corner of the image (a round button).

???
Copy linkTweet thisAlerts:
@Scrif2016authorApr 17.2018 — Sorry. I thought the link you sent for examples was Fancybox 3:

http://fancyapps.com/fancybox/#examples

The "Image Gallery" tab that is under the text "Note: ID's are single use and are only applied to one element.

Galleries are created from elements who have the same "data-fancybox-group" or "rel" attribute value. " from the url I posted is exactly what I want. X in upper right corner of image, websites contents to still visible (but faded).

Thanks for all your help.
Copy linkTweet thisAlerts:
@SempervivumApr 17.2018 — Yes, the version thing is a bit confusing. I you prefer Fancybox 2 I would prepare a code to implement the multi-gallery function ...
Copy linkTweet thisAlerts:
@SempervivumApr 17.2018 — PS: Fancybox 3 is highly configurable. Close button can be placed top right of the image:

https://jsfiddle.net/Sempervivum/g0ynznfy/1/

Can also be placed inside the image with semi-transparent background:

https://jsfiddle.net/Sempervivum/g0ynznfy/2/

I highly recommend to use the latest version as it is state of the art, fully responsive and touch enabled.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 17.2018 — Ok. Can I configure Fancybox the same way? ie: multiple galleries on a single page?
Copy linkTweet thisAlerts:
@SempervivumApr 17.2018 — Yes, that's no problem:

https://jsfiddle.net/Sempervivum/25b52coL/4/
Copy linkTweet thisAlerts:
@Scrif2016authorApr 18.2018 — Thanks very much! I'll try to implement this into my existing website.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 23.2018 — Do I need to have the href's in the code below if the images are local (on the server):

<div class="lightgallery">

<a data-fancybox="gallery1" id="lgitem-1" href="http://lorempixel.com/output/animals-q-c-400-300-6.jpg">

<img src="http://lorempixel.com/output/animals-q-c-400-300-6.jpg" />

</a>

<a data-fancybox="gallery1" href="http://lorempixel.com/output/animals-q-c-400-300-7.jpg">

<img src="http://lorempixel.com/output/animals-q-c-400-300-7.jpg" />

</a>

<a data-fancybox="gallery1"href="http://lorempixel.com/output/animals-q-c-400-300-8.jpg">

<img src="http://lorempixel.com/output/animals-q-c-400-300-8.jpg" />
Copy linkTweet thisAlerts:
@SempervivumApr 23.2018 — Yes, you need the hrefs but you don't need the protocol and the domain but you can address the images relatively:
&lt;div class="lightgallery"&gt;
&lt;a data-fancybox="gallery1" id="lgitem-1" href="my-image-1.jpg"&gt;
&lt;img src="my-image-1.jpg" /&gt;
&lt;/a&gt;
if the images are in the same folder as the html file.

Or:
&lt;div class="lightgallery"&gt;
&lt;a data-fancybox="gallery1" id="lgitem-1" href="images/my-image-1.jpg"&gt;
&lt;img src="images/my-image-1.jpg" /&gt;
&lt;/a&gt;
if the images are in the folder "images".

In my demo I used absolute addressing only in order to be able to use the images of lorempixel.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 24.2018 — I added all the css and scripts to my site but when I try to add the following it messes the gallery section up:

<div class="lightgallery">

<a data-fancybox="gallery1" id="lgitem-1" href=gallery/exterior/e1.jpg">

<img src="gallery/exterior/e1.jpg"/>

</a>

<a data-fancybox="gallery1" id="lgitem-1" href=gallery/exterior/e2.jpg">

<img src="gallery/exterior/e2.jpg"/>

</a>

<a data-fancybox="gallery1" id="lgitem-1" href=gallery/exterior/e2.jpg">

<img src="gallery/exterior/e2.jpg"/>

</a>

</div>

Here is the current version:

http://pcnetguard.com/test6/
Copy linkTweet thisAlerts:
@SempervivumApr 24.2018 — You include the CSS of Fancybox like this:
&lt;link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen"&gt;
As there is a leading slash the path is searched for in the root path of your site, not in the current path. Delete the leading slash.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 24.2018 — Thanks. Almost there. When I click the exterior image it pops up the first image in the group but I don't get left or right arrows to change the picture.

http://pcnetguard.com/test6/
Copy linkTweet thisAlerts:
@SempervivumApr 24.2018 — When using Fancybox 2 the gallery is created by setting the rel attribute instead of data-fancybox. Change this:
&lt;a data-fancybox="gallery1" id="lgitem-1" href="gallery/exterior/e1.jpg"&gt;
to this:
&lt;a rel="gallery1" id="lgitem-1" href="gallery/exterior/e1.jpg"&gt;
and the javascript accordingly:
$('[rel^="gallery"]').fancybox({
transitionDuration: 500,
transitionEffect: "slide",
smallBtn: "true"
});
$("img[data-lightgallery]").on("click", function() {
var id=$(this).data("lightgallery");
$("#" + id).trigger("click");
});
Copy linkTweet thisAlerts:
@Scrif2016authorApr 24.2018 — That fixed it. Thanks Sempervivum! You're awesome!
Copy linkTweet thisAlerts:
@Scrif2016authorApr 24.2018 — Is it possible to easily switch to fancybox 3?
Copy linkTweet thisAlerts:
@SempervivumApr 24.2018 — I assumed that you don't like the layout of Version 3. It's no problem to switch to that version. My last fiddle uses version 3:

https://jsfiddle.net/Sempervivum/25b52coL/4/

You just need to include the CSS and JS of version 3 and change the HTML and CSS according to the fiddle.
Copy linkTweet thisAlerts:
@Scrif2016authorApr 24.2018 — Sorry. You have been VERY helpful. Maybe I should have explained my issues:

  • - opening/closing image causes fixed elements to jump. I see they fixed this in fancybox3 (not sure about v2)

  • - swipe enabled - is fancybox2 swipe capable? Right now on a tablet I have to tap the image to get the next/previous arrows. Not able to swipe to get to next image

  • - next/previous arrows outside - I didn't realize this until I got the gallery up but it would be better to have the next/previous arrows at the edge of the screen (like in your fancybox3 example) due to images being different sizes


  • Again, thank-you for all the help. I really appreciate the time and effort you have put into helping me.
    Copy linkTweet thisAlerts:
    @SempervivumApr 24.2018 — That's important information. I opened your testpage on my mobile (Samsung S4).

    - I didn't notice an isssue at opening/closing the lightbox but when scrolling vertically by swiping the image skips.

    - Obiviously Fancybox 2 is not touch friendly: It doesn't react on swiping horizontally and the next/prev buttons are not visible, they appear only when tapping the image. This is a major improvement in Version 3 that one can navigate by swiping. I tried to test my fiddle or the demo at the website of fancybox but none of them worked. However swiping etc. should work for this version.

    - The next/prev buttons are outside the image when there is enough space. However they shift upon the image when the screen is narrow.
    Copy linkTweet thisAlerts:
    @Scrif2016authorMay 09.2018 — Ok. Trying to switch to fancybox 3. My fancybox2 stylesheet and js lines are like this:

    (in head section)

    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen">

    (at bottom of body section)

    <script src="fancybox/source/jquery.fancybox.pack.js?v=2.1.7" type="text/javascript"></script>

    I have fancybox3 located in my web root in folder fancybox3. Not sure what the fancybox3 css and js lines should look like.
    ×

    Success!

    Help @Scrif2016 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...