Hello - thank you for writing lightGallery! I am having a fairly simple issue that I'm having trouble solving. Images seem to load correctly however sometimes (maybe 1 in 10 times) they are being displayed sort of "cut-off" at the bottom sometimes. The reason I say they load correctly is because if I cycle all the way through the gallery when I return to the same image that was displayed cut off before - it displays the full image. Please see examples: I'm not sure how to fix this. Is there a timeout i could set higher perhaps? I have reproduced this problem on my iphone and ipad in both chrome and safari. I have not had this problem on the desktop - but I'm only recruiting lightGallery for the mobile site - so that's not much help! Thank you again for writing this. I see you have declined donations in the past, but if you change your mind - I would be happy to make one. This is great code and I would like to help you - even if its only buying you a beer!

BTW - the test site for the mobile version is at www.francesmiddendorf.com/mobile26/mobile/images.php?qr=0 Updated: www.francesmiddendorf.com/mobile/images.php?qr=0 -Alex

I want to run lightgallery on click, there is a solid reason so I want to run lightgallery on click function. The issue is that it works on second click not on first click. That's weired. I want it to work on first click always and on close it should close gallery. And on new click it should start new gallery lightbox. This is the code and it works as intended **but only issue is that it works on second click not on first click. **

`

function run_gallery(_class, _class2, _class3){    	
		var lightbox = jQuery('.'+_class);	
		lightbox.lightGallery({
			selector: '.'+_class3+_class2,
			galleryId: 1,
			subHtmlSelectorRelative: true
		});
		// lightbox.on("onCloseAfter.lg", function() {
		//     lightbox.data('lightGallery').destroy(true);
		// });	
		if(lightbox.data('lightGallery')){
			lightbox.one("onCloseAfter.lg", function() {			
			    lightbox.off("onCloseAfter.lg") // <-- unbind
			        .data('lightGallery').destroy(true);
			        lightbox.data('lightGallery').destroy(true);
			});
		}
	}
   jQuery(document).on('click','.gt-gallery-box', function(){		    	
		var cLick = jQuery(this).data('id');
		var _class = 'gt-wrapper';
		var _class3 = 'gt-gallery-box';	
		var lightbox = jQuery('.'+_class);	
		run_gallery(_class, cLick, _class3);		
	});

`

Any one there who can help me out what's wrong I am doing ??? Really wasted my time in this but it should be quiet simple but its not that easy for me at least ...

In short I want above my function to run on click each time but it runs on second click don't know why ? My light gallery starts only on second click ... any solutions please ???

Thanks

Description

The feature requested in https://github.com/sachinchoolur/lightGallery/issues/1055 seems not to work on iOS Devices (e.g. iPhone X). We've tested with the latest lightgallery version 2.4.0.

See these screenshots:

Firefox desktop mobile preview with simulated iPhone SE:

Real iPhoneX Screenshot:

Environment

• Browser and version - Safari 13.1
• OS - iOS Catalina
• lightGallery version - 2.4.0

Additional context

We will purchase the team license, but only if this feature also works on iOS.

In Chrome 71, exception is thrown when invoking document.exitFullscreen() while not in full-screen mode. https://github.com/jpilfold/ngx-image-viewer/issues/23#issuecomment-446899261

The issue described in #182 appears on mobile devices as well. We saw this behaviour on two devices:

• Safari on iPhone SE with iOS 9.3.2
• Stock Android Browser on LG G2 (D802) with Android 5.0.2

I suspect this to happen due to the separation of the scale and position transitions between two different DOM nodes. The fix could be to simply scale and move the image at once instead of scaling the image and moving the container.

Please see the attached screen recording:

Before I begin I should say that I have been away from HTML and Javascript for several years. I found and am having good success retrofitting lightGallery into an existing web site.

So far I am making simple web pages that are not linked to each other. I am building them using pieces of the code in the lightGallery "thumbnails" examples. I create the nested div's

< div class="demo-gallery mrb50"> < div id="aniimated-thumbnials">

entries .. 

< / div> < /div>

and include multiple entries of the form:

< a class="" href="imagename" data-sub-html="< h4>Title 1< p>Caption 1< /p>">< img src="thumbname"> < /a>

and then start up the gallery:

< script> $('#aniimated-thumbnials').lightGallery({ index:0, preload:2, thumbnail:true }); < /script>

(For now there is nothing else on the web pages I am making. So far I am just working with lightGallery.)

This all works file, but the first thing I see is a blank web page with all my thumbnails in the upper left. If I click on any of the thumbnails I then see the gallery as I expect, first large image centered, thumbnails along the bottom, controls as I expect, and all is well.

My question is, how do I get the page to open immediately on the properly functioning gallery with thumbnails? I am sure that I am missing something simple.

Note that there is a space after the < brackets above. I don't know how to insert literal code in this composer yet!

It would be fine if there was a container around the image which follows the size of the image and the navigation, the close button, the thumbnails and the custom html would be rendered there because in this way the customization of the layout would be easier. What do you think?

This project license is not related to GPLv3. REMOVE this line immedialy unless you want troubles.

https://github.com/sachinchoolur/lightGallery/blob/46eb69abd3847c9812843bfc9b9db6c6792b6101/package.json#L27

A GPLv3 project can allow other project to soft link it (e.g.: through npm ) and publish under other license (like MIT)

But your license is not a word with GPLv3. but basically:

• Free to use only in GPLv3 projects
• Otherwise pay you

That's definily not GPLv3, but a totaly commercial project that just open its source code.

A GPLv3 give right's under many other situation.

If's totally ok make this project commercial, but unacceptable cheaking us it's a free project.

Hi,

I Noticed, that close button on the right hand corner and the navigation buttons on the bottom are not visible on Samsung GalaxyTab / Default browser

Hey @sachinchoolur. Not sure if you've seen my answer to the previous issue since it got closed.

Basically, since the 2.18 update, the slide transition works great on Safari but a weird "jump cut" issue now happens when I close and reopen the gallery. Again, Firefox and Chrome both work just fine.

Here is a video capture of it in action.

Any idea of what might be causing this?

Is your feature request related to a problem? Please describe. Not a problem

Describe the solution you'd like Provide ability to localise (ie translate) the aria-label text of controls (lg-icon)

Description

If I use any method (onInit, onBeforeClose, etc) to set a state my component either gets thrown into an infinite loop or it rerenders entirely, depending on method.

onInit throws the component into an infinitel loop if I have a setState inside it.

This was not a problem with React 16 with LG 2.3. I have not found a workaround in React 18, LG 2.7

Steps to reproduce

Working demo:

https://codesandbox.io/s/lightgallery-23-zf78it

Not working demo:

https://codesandbox.io/s/lightgallery-27-tbxl1p (I have commented out the setState )

This severly limits on how I can integrate the LG with the rest of my App, is there a workaround?

Happy new year :)

Description

I have faced one issue with the plugin. When we have two images and initialise gallery, The loop true options not work as expected. If I change the condition on line https://github.com/sachinchoolur/lightGallery/blob/4553431ae357f78512bff36ccdc568dfc69edbc0/src/lightgallery.ts#L2036 and https://github.com/sachinchoolur/lightGallery/blob/4553431ae357f78512bff36ccdc568dfc69edbc0/src/lightgallery.ts#L2076 of code to allow loop for more then 1 image. Then animation looks buggy, (ref: https://drive.google.com/file/d/1H5F46JBnA7AUfZXMk2YVjWfmqEoAlDPV/view?usp=drivesdk)

Steps to reproduce

Initialize gallery with two images and with loop true option.

JS code that you use to initialize lightGallery.

lightGallery(document.getElementById('lightgallery'), {
    loop:true,
    ... settings
});

Sample HTML markup

<div id="lightgallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
        <img alt=".." src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1024-800">
        <img alt=".." src="img/thumb2.jpg" />
    </a>
    ...
</div>

Environment

• Browser and version - Chrome Version 108.0.5359.124 (Official Build) (64-bit)
• OS -
• lightGallery version - 2.6.1

Additional context

Hi, I want to show image carousel with thumbnails. I dont want to make the container divs height fixed since I am creating responsive behaviour.

Here, I want my gallery to size it up as the window resized. If I set width to height ratio 'aspec-ratio' it doesnt sizes it up nicely since thumbnails are not resized well with decreasing window size. So the aspect ratio breaks. I wanted to over come this issue by making all classes position relative, it works like a charm for normal view but when I make it full screen it breaks. Doesnt work. How can I achive responsive behavior with absoulte postion as in the default behaviour?

Description

When the user presses back on a mobile device, it goes to the previuosly visited page rather than closing the gallery. Is it somehow possible to fix that?

Environment

• Browser and version - Firefox
• OS - Android

Summary

Prevent opening a gallery based on a condition.

Forgive me if I have missed something though this doesn't seem possible.

Basic example

lg.addEventListener('lgBeforeOpen', () => {
  return false;
});

Motivation

Seems like a very standard/basic feature. Genuinely need it to prevent marketing cookies from loading if a particular gallery includes youtube slides where consent has not been granted for example.

Description

The vimeoThumbnail plugin or vimeo/player.js is doing doing a get request on /undefined as soon as Vimeo video is added to the dynamic elements.

Steps to reproduce

https://codepen.io/GerhardAT/pen/wvXjayx

Check the console of the view.

JS code that you use to initialize lightGallery.

const container = document.getElementById("lightgallery");

const items = [{
    'src': 'https://vimeo.com/774288555'
}];

lightGallery(container, {
    plugins:              [lgThumbnail, lgZoom, lgVideo, lgVimeoThumbnail],
    container:            container,
    hash:                 false,
    closable:             false,
    closeOnTap:           false,
    escKey:               false,
    showMaximizeIcon:     true,
    download:             false,
    loadYouTubePoster:    true,
    height:               '100%',
    licenseKey:           '0000-0000-000-0000',
    speed:                500,
    dynamic:              true,
    dynamicEl:            items,
    autoplayFirstVideo:   false,
    autoplayVideoOnSlide: false,
    vimeoPlayerParams:    {
        byline:     false,
        portrait:   false,
        muted:      false,
        responsive: true,
    }
});

Sample HTML markup

<div id="lightgallery"></div>

Environment

• Browser and version Firefox 107.0
• OS Ubuntu 22.10
• lightGallery version 2.7.1-beta.1