andreknieriem / simplelightbox

Touch-friendly image lightbox for mobile and desktop
https://simplelightbox.js.org
MIT License
1.11k stars 173 forks source link

Not working close and naviations buttons #293

Closed vanaveno closed 7 months ago

vanaveno commented 1 year ago

Hi I don't know how to set up litebox correctly, I downloaded the Version 2.12.1, simple-lightbox.js and after code

<div class="gallery border"> <a class="col-lg-2 col-12 pic p-1 float-lg-left d-b" href="image1" > <img class="wmax100" src="image1" /> </a> <a class="col-lg-2 col-12 pic p-1 float-lg-left d-b" href="image2" > <img class="wmax100" src="image2" /> </a> </div>

            <script>

let gallery = new SimpleLightbox('.gallery a');

            </script>

the picture is opening but not working buttons like close next and preview, where am I making mistake? Thanks Vana

andreknieriem commented 1 year ago

Seems like an error appeared. Which file do you use? Everything looks like this should work.

kmiterror commented 1 year ago

I have the same issue,2.11.0 works fine, in the dev console I see this message

Failed to execute 'querySelector' on 'Document': 'HTML > BODY.page-template.page-template-elementor_canvas.page.page-id-114.wp-custom-logo.theme-businesstar.woocommerce-js.qodef-qi--no-touch.qi-addons-for-elementor-1.5.6.home-one.right-sidebar.elementor-default.elementor-template-canvas.elementor-kit-66.elementor-page.elementor-page-114.e--ua-blink.e--ua-chrome.e--ua-mac.e--ua-webkit.clickup-chrome-ext_installed.hidden-scroll:nth-child(2) > DIV.elementor.elementor-114:nth-child(9) > SECTION.elementor-section.elementor-top-section.elementor-element.elementor-element-44ff2c4.elementor-section-boxed.elementor-section-height-default:nth-child(2) > DIV.elementor-container.elementor-column-gap-no:nth-child(1) > DIV.elementor-column.elementor-col-100.elementor-top-column.elementor-element.elementor-element-63773cd1:nth-child(1) > DIV.elementor-widget-wrap.elementor-element-populated:nth-child(1) > DIV.elementor-element.elementor-element-3faf13a.elementor-widget.elementor-widget-text-editor:nth-child(1) > DIV.elementor-widget-container:nth-child(1) > DIV.mobile-de-plugin.override:nth-child(3) > B:nth-child(1) > DIV.ads.make-slim:nth-child(2) > DIV.ad:nth-child(2) > DIV.carItem:nth-child(1) > DIV.gallery:nth-child(1) > A:nth-child(1) img' is not a valid selector

which is triggered somewhere here:

document.querySelector(this.generateQuerySelector(this.relatedElements[this.currentImageIndex]) + " " + this.options.captionSelector) : typeof this.options.captionSelector == "function" && (u = this.options.captionSelector(this.relatedElements[this.currentImageIndex]))

iamcaptaincode commented 1 year ago

I'm seeing this same error message.

Duod-Notyap commented 1 year ago

Not sure if this has been resolved but I just had this exact issue due to using the wrong version. I was using the simple-lightbox.min.js instead of the (correct) jQuery compatible simple-lightbox.jquery.min.js Swapping the files resolved the issue.

michaelmannucci commented 1 year ago

Did you guys figure this out? What Duod-Notyap suggested did not work for me.

soy-andrey-semyonov commented 1 year ago

I was able to make it work by providing captionSelector: 'self' option:

.simpleLightbox({ captionSelector: 'self' })