I'm trying to implement lightbox on a page on a page that I liked, but I did not quite understand where and how to apply the styles that are displayed on the page: link It even has a page that explains how to do it on the site itself, but it's kind of confusing for me. I copied the file imagelightbox.js, called the index, and copied the code that calls the lightbox.
$( function()
{
$( '.dout' ).imageLightbox();
});
The minimum CSS style required also I put:
#imagelightbox{
position: fixed;
z-index: 9999;
-ms-touch-action: none;
touch-action: none;}
The html looks like this:
<div class="container">
<a class="dout" href="../images/reformas-renascer-obra1.jpg" data-imagelightbox="g"><img width="150" height="150" src="../images/reformas-renascer-obra1.jpg" id="imagelightbox" /></a>
<a class="dout" href="../images/reformas-renascer-obra2.jpg" data-imagelightbox="g"><img width="150" height="150" src="../images/reformas-renascer-obra2.jpg" id="imagelightbox" /></a>
<a class="dout" href="../images/reformas-renascer-obra3.jpg" data-imagelightbox="g"><img width="150" height="150" src="../images/reformas-renascer-obra3.jpg" id="imagelightbox" /></a>
<a class="dout" href="../images/reformas-renascer-obra4.jpg" data-imagelightbox="g"><img width="150" height="150" src="../images/reformas-renascer-obra4.jpg" id="imagelightbox" /></a>
<a class="dout" href="../images/reformas-renascer-obra5.jpg" data-imagelightbox="g"><img width="150" height="150" src="../images/reformas-renascer-obra5.jpg" id="imagelightbox" /></a>
</div>
It's all working in the example I made here link . The problem is that I am not able to copy the options that it shows in the page of the first link