Now take the id_number variable into account. This element is not useful for the example depicted here because we use padding for our elements (see CSS), but it might be useful if no padding is used. Also notice the (currently useless image-wrapper). Finally we instantiate the lightGallery gallery and Isotope grid layout. After defining the basic picture elements (original in the a tags and thumbnail as picture in the img tag), we need to add the data to the data-responsive HTML attribute for the responsive design. We also have to include a picture path that contains the image source directory ( picture_path). The data is passed through the pictures variable or the gallery (and accessed through ). Next, we can start looping over the individual elements in the gallery (for-loop). Second, we define a sizing element ( gallery-sizer) that defines the size of a basic element in our grid. Then we end up with something that looks a lot simpler! First we define the gallery wrapper ( div with image-gallery class). The final result of this tutorial should look like this: Please check the repo if you want to have the bleeding edge version of all files.
LIGHTGALLERY DISPLAY SEPARATE DIRECTORIES AS PICTURE ROWS CODE
The code and text below is mainly an explanation of what the different files in my example gallery do. article showing images thumbs that may be opened into a lightgallery /list list4 Is there a way to open all files by default into another. “A picture is worth a thousand words” – I was with this philosophy I knew I wanted to one day add a gallery to my website. Jekyll image gallery Liquid Isotope lightGallery