Toggle Thumbnails button hides caption as well

[David Badke]

When the Toggle Thumbnails button is enabled and thumbnails are visible, clicking the button hides the thumbnails - this is good. However, it also hides the caption - not so good. This is because the "lg-sub-html" div is a child of the "lg-components" div, and the toggle hides the "lg-components" div (and all of its children).

Either the "lg-sub-html" div should not be a child of the "lg-components" div, or the toggle should hide the "lg-thumb-outer" div instead of the "lg-components" div.

Note: I was looking at a demo (https://www.lightgalleryjs.com/v1/demos/) that uses lightGallery version 1, and it does not have this issue.

[Sachin Neravath]

Thank you for reporting this. Yes, the HTML structure is completely different in v2. I'll try to improve the experience

[snote]

Hi DBadke.
Can you please help me how to get the thumbnails to toggel in V2.
I tried:
const $gall = document.getElementById("gall");
const gall = window.lightGallery($gall, {
dynamic: true,

toggleThumb: true,

plugins: [lgZoom, lgThumbnail],
dynamicEl: [
{
src:
...
responsive:
...

thumb:
...

},

]

});

AnimateThumb: true, and thumbnail: true, works fine but no toggeling.
Thanks,
Snote

[David Badke]

You also need to set the allowMediaOverlap option, which is false by default:

toggleThumb: true,
allowMediaOverlap: true

I don't know why, but if allowMediaOverlap is false, the thumbnail toggle button is hidden even if toggleThumb is true.

David

[snote]

Thanks for that hint.
I found my mistake:
I copied and pasted the command from https://sachinchoolur.github.io/lightgallery-desktop/
and there is a writing error. It is toogle instead of toggle.

But I still can't start the gallery with hidden thumbs and the toggle button visible.
In V1 I achieved this with showThumbByDefault:false, but this seems not to be working any more...

[Christina]

I'm having the same problem.

After years with Fancybox, I switched to this. I want the toggle thumbs to show (it currently doesn't do anything), I set allowMediaOverlap to true and the images cover up the thumbnails and I can't see the toggle thumb icon. Why can't this and the next previous arrows be moved into the top bar? Fancybox allows a layout, it keeps the stage nice and clean.

[Sachin Neravath]

Yes, currently, toggleThumb does not work if allowMediaOverlap is set to false.

In lightGallery, most things are handled by CSS, including the toggleThumb option for better performance and experience.

Honestly, I didn't think many people would use toggleThumb option. But, this can be done without much effort.
I'll try to include it in version 2.7.0 as it requires some markup changes.

Also, @carasmo, There is no option to move the next/prev buttons to the top bar.
But, you can achieve it with the help of lightGallery events and methods

JS

const $galleryContainer = document.getElementById("gallery-container");

const customControls = `<button type="button" id="lg-toolbar-prev" aria-label="Previous slide" class="lg-toolbar-prev lg-icon">  </button><button type="button" id="lg-toolbar-next" aria-label="Next slide" class="lg-toolbar-next lg-icon">  </button>`;

$galleryContainer.addEventListener("lgInit", (event) => {
  const pluginInstance = event.detail.instance;

  // Note append and find are not jQuery methods
  // These are utility methods provided by lightGallery
  const $toolbar = pluginInstance.outer.find(".lg-toolbar");
  $toolbar.prepend(customControls);

  document.getElementById("lg-toolbar-prev").addEventListener("click", () => {
    pluginInstance.goToPrevSlide();
  });
  document.getElementById("lg-toolbar-next").addEventListener("click", () => {
    pluginInstance.goToNextSlide();
  });
});

lightGallery($galleryContainer, {
  speed: 500,
  controls: false,
  plugins: [lgZoom]
});

CSS

.lg-toolbar-next:before {
  content: "\e094";
}
.lg-toolbar-prev:before {
  content: "\e095";
}

Demo - https://codepen.io/sachinchoolur/pen/OJzOgae

Hope it helps

[Christina]

Thanks for that. Did it this way.

    .lg-next {
       top: -38px;
       right: 50%;
       transform: translateX(calc( 50% + 22px));
   }

   .lg-prev {
       top: -38px;
       left: 50%;
       transform: translateX(calc( -50% - 22px ));
   }

[Sachin Neravath]

Yes, that works if you have only a few icons on the toolbar.

Please check the mobile view and make sure that the icons are not overlaping

[snote]

Thanks Sachin.
Would appreachiate to use the toggle thumbs option properly in the next Version!

Snote

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.