Come da titolo, ho una gallery con delle immagini che scorrono in automatico, creata con slickgallery, alla quale ho aggiunto un "lighbox" che si attiva al clic su una immagine, mediante la libreria aggiuntiva slick-lightbox.

Ecco il codice:

codice:
<div class="slider">
  <div><img src="path/1w.jpg" alt="Slide 1" data-slick-lightbox="path/1w.jpg"></div>
  <div><img src="path/2w.jpg" alt="Slide 2" data-slick-lightbox="path/2w.jpg"></div>
  <div><img src="path/3w.jpg" alt="Slide 3" data-slick-lightbox="path/3w.jpg"></div>
  <div><img src="path/4w.jpg" alt="Slide 4" data-slick-lightbox="path/4w.jpg"></div>
  <div><img src="path/5w.jpg" alt="Slide 5" data-slick-lightbox="path/5w.jpg"></div>
  <div><img src="path/6w.jpg" alt="Slide 6" data-slick-lightbox="path/6w.jpg"></div>
</div>
codice:
$(document).ready(function(){  $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1
        }
      }
    ],
    centerMode: false,
    centerPadding: '0',
    focusOnSelect: true
  });


  // Aggiunge il lightbox alle immagini della slider
  $('.slider').slickLightbox({
    src: 'src',
    itemSelector: '.slick-slide:not(.slick-cloned) img',
    background: 'rgba(0,0,0,.8)',
    slick: {
      arrows: true,
      prevArrow: '<button type="button" class="slick-prev">Previous</button>',
      nextArrow: '<button type="button" class="slick-next">Next</button>',
    }
  });
});
Il mio problema è che vorrei che nel lightbox si vedessero anche le anteprime delle immagini in basso (quello che in inglese si chiama "navigation thumbnails").

Vi risulta che sia possibile implementarlo con slickslider?

O sarebbe meglio combinare quest'ultimo con una diversa libreria, per la parte lightbox che si attiverebbe al clic?

Mi verrebbe da pensare che quest'ultima soluzione possa essere migliore, dato che le funzionalità si slickslider-lightbox mi sembrano molto limitate.

Tuttavia sto avendo difficoltà a combinare le due librerie per ottenere i due effetti.

Mi sono rivolto a chat-gpt (che spesse mi è stato utile nelle ultime settimane), che mi ha consigliato di utilizzare questo codice js:

codice:
$(document).ready(function(){  $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1
        }
      }
    ],
    centerMode: false,
    centerPadding: '0',
    focusOnSelect: true
  });


   // Aggiungiamo un evento di click alle immagini della slider
  $('.slider').on('click', '.slick-slide:not(.slick-cloned) img', function() {
    // Prendiamo l'indice dell'immagine cliccata
    var index = $(this).closest('.slick-slide').data('slick-index');
    // Prendiamo le informazioni di tutte le immagini della slider
    var items = $('.slider').slick('getSlick').$slides.toArray().map(function(slide) {
      return {
        src: $(slide).find('img').attr('data-slick-lightbox'),
        title: $(slide).find('img').attr('alt')
      }
    });
    // Inizializziamo la lightbox di nanogallery con le immagini della slider
    $("#my-slider").nanogallery2({
      items: items,
      locationHash: false,
      thumbnailWidth: 120,
      thumbnailHeight: 120,
      thumbnailHoverEffect: [{ name: 'labelAppear75', duration: 300 }],
      thumbnailLabel: { position: 'overImageOnMiddle', hideIcons: true },
      viewerToolbar: { display: true, style: 'default' },
      viewerTools: {
        topLeft: 'label',
        topRight: 'fullscreenButton, closeButton',
        items: 'previousButton, pageCounter, nextButton'
      },
      galleryCarousel: { enabled: true },
      galleryMaxRows: 1,
      galleryDisplayMode: 'rows',
      startingViewMode: 'gallery',
      viewerDisplayLogo: false,
      viewerAutoPlay: false,
      viewerAutoPlayInterval: 5000,
      viewerZoomSettings: {
        mouseWheelZoom: false,
        pinchToZoom: true
      },
      itemsBaseURL: location.href.replace(location.hash, ''),
      // Apriamo la lightbox all'immagine cliccata
      galleryStartupIndex: index,
    });
  });
});
L'ho testato: la parte slickslider (senza lightbox) continua a funzionare. Ma quando si clicca sull'immagine per attivare il lightbox questo non parte.

Temo dipenda dal fatto che non è stata modificata correttamente la parte html, ecco il codice che sto utilizzando:

codice:
<div class="slider">  <div><img src="path/1w.jpg" alt="Slide 1" data-nanogallery-src="path/1w.jpg"></div>
  ecc....

</div>
Purtroppo non funziona: al clic non parte la nanogallery.

Chiedo il vostro supporto per:

1) Sapere se concordate sul combinare le due librerie o se a vostro avviso si può trovare più facilmente il modo di inserire una navigation thumbnails con slickslider-lightbox.

2) Nel caso concordiate sull'opportunità di combinare due librerie, cosa vi sembra che ci sia di sbagliato nel mio codice? Perché Nanogallery2 non si attiva al clic?

Grazie per il supporto!