How to implement imagelightbox

1

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

    
asked by anonymous 25.06.2016 / 18:50

0 answers