Image Gallery with Lightbox

[cosmo]

Hi,

I’m trying to use the Image Gallery with a Lightbox. This is my HTML:

<div class="thumb-gallery-wrapper lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">
                <div class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark mb-3">
                    <div>
                        <a href="//dummyimage.com/800x600/abcdef/fff&text=1""><img src="//dummyimage.com/546x546/abcdef/fff&text=1"" alt=""1"" /></a>
                    </div>
                    <div>
                        <a href="https://dummyimage.com/800x600/abcdef/fff&text=2"
                            class="img-thumbnail img-thumbnail-no-borders d-inline-block mb-1 me-1"><img
                                src="https://dummyimage.com/546x546/abcdef/fff&text=2" class="img-fluid" alt="2"></a>
                    </div>
                    <div>
                        <a href="https://dummyimage.com/800x600/abcdef/fff&text=3"
                            class="img-thumbnail img-thumbnail-no-borders d-inline-block mb-1 me-1"><img
                                src="https://dummyimage.com/546x546/abcdef/fff&text=31" class="img-fluid" alt="3"></a>
                    </div>
                    <div>
                        <a href="https://dummyimage.com/800x600/abcdef/fff&text=4"
                            class="img-thumbnail img-thumbnail-no-borders d-inline-block mb-1 me-1"><img
                                src="https://dummyimage.com/546x546/abcdef/fff&text=4" class="img-fluid" alt="4"></a>
                    </div>
                    <div>
                        <a href="https://dummyimage.com/800x600/abcdef/fff&text=5"
                            class="img-thumbnail img-thumbnail-no-borders d-inline-block mb-1 me-1"><img
                                src="https://dummyimage.com/546x546/abcdef/fff&text=5" class="img-fluid" alt="5"></a>
                    </div>
                </div>
                <div class="thumb-gallery-thumbs owl-carousel owl-theme manual thumb-gallery-thumbs">
                    <div>
                        <span class="d-block cur-pointer">
                            <img alt=""1"" src="//dummyimage.com/74x74/abcdef/fff&text=1"" />
                        </span>
                    </div>
                    <div>
                        <span class="d-block cur-pointer">
                            <img alt=""2"" src="//dummyimage.com/74x74/abcdef/fff&text=2"" />
                        </span>
                    </div>
                    <div>
                        <span class="d-block cur-pointer">
                            <img alt=""3"" src="//dummyimage.com/74x74/abcdef/fff&text=3"" />
                        </span>
                    </div>
                    <div>
                        <span class="d-block cur-pointer">
                            <img alt=""4"" src="//dummyimage.com/74x74/abcdef/fff&text=4"" />
                        </span>
                    </div>
                    <div>
                        <span class="d-block cur-pointer">
                            <img alt=""5"" src="//dummyimage.com/74x74/abcdef/fff&text=5"" />
                        </span>
                    </div>
                </div>
            </div>

There are 5 images to show. If I click on image 1, the lightbox opens the large version of image 1 but in the Lightbox I see “Image 4 of 11”. I expected “Image 1 of 5”

What I try to achieve is a Image gallery with thumbnails and if I click a picture the lightbox opens and I can swipe in the lightbox to the next image.

Can you please help me with that?

---

• This topic was modified 1 month ago by cosmo.

[Support]

Hello, you probably have more than one gallery in that page, can you please send me the URL of your site?

Testing with this code it worked well:

<div class="thumb-gallery-wrapper lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">
	<div class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark mb-3">
		<div>
			<a href="http://dummyimage.com/800x600/abcdef/fff&text=1"><img src="http://dummyimage.com/546x546/abcdef/fff&text=1" alt="1" /></a>
		</div>
		<div>
			<a href="http://dummyimage.com/800x600/abcdef/fff&text=2"><img src="http://dummyimage.com/546x546/abcdef/fff&text=2" alt="2" /></a>
		</div>
		<div>
			<a href="http://dummyimage.com/800x600/abcdef/fff&text=3"><img src="http://dummyimage.com/546x546/abcdef/fff&text=3" alt="3" /></a>
		</div>
	</div>
	<div class="thumb-gallery-thumbs owl-carousel owl-theme manual thumb-gallery-thumbs">
		<div>
			<span class="d-block cur-pointer">
				<img alt="1" src="http://dummyimage.com/74x74/abcdef/fff&text=1" />
			</span>
		</div>
		<div>
			<span class="d-block cur-pointer">
				<img alt="2" src="http://dummyimage.com/74x74/abcdef/fff&text=2" />
			</span>
		</div>
		<div>
			<span class="d-block cur-pointer">
				<img alt="3" src="http://dummyimage.com/74x74/abcdef/fff&text=3" />
			</span>
		</div>
	</div>
</div>

---

[cosmo]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[cosmo]

This reply has been marked as private.

[Author]

Posts