1
I’m trying to implement lightbox on a one page website I liked, only I don’t understand very well where and how to apply the styles that are presented on the page: http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/ There’s even a page that explains how to proceed on the site itself, but it’s a little confusing for me. I copied the imagelightbox.js file, called the index and copied the code that makes the call to the lightbox.
$( function()
{
$( '.dout' ).imageLightbox();
});
The required minimum css style also put:
#imagelightbox{
position: fixed;
z-index: 9999;
-ms-touch-action: none;
touch-action: none;}
The html is 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 http://186.250.243.138/~renovations/gallery/. The problem is that I am not being able to copy the options it shows on the page of the first link