dimanche 27 octobre 2019

SimpleLightbox and an array of images to create an image gallery

I am trying to create a gallery out of an array of images using SimpleLightbox. I have a simple project with html, css and javascript files. I am already using SimpleLightbox somewhere else in the website fully working but the way I use it in the other places is by embedding the images within anchor tags and then making use of jquery to call it in this way and it works just fine:

Example1:

<script src="js/simple-lightbox.min.js"></script>
<script>
$(function() {
  const $gallery1 = $('.gallery-1 a').simpleLightbox();
<script>

Whereas what I am trying to do now is the following

Example2:

$('.gallery-images a:nth-of-type(1)').on('click', function () {
  SimpleLightbox.open({
    items: ['img/gallery7.jpeg', 'img/gallery8.jpeg', 'img/gallery9.jpeg']
  });
});

Which basically means that if I click on the first image, I want the gallery sliding the pictures that I put in the array and that they are not on the html page but in img folder.

The error that I am getting in the browser console is:

SimpleLightbox is undefined

Worthy to mention that I did not have simple-lightbox installed with npm but I had the minimize file living in the js folder and it was working fine when I use it as in the first example. Considering the error coming up when I am trying to use it as in the second example, I've also installed the package but unfortunately I am still getting the same error.




Aucun commentaire:

Enregistrer un commentaire