Multipurpose Website Templates. How to manage LightGallery extension

This tutorial is going to show you how to manage LightGallery plugin. We use it in our website templates to implement functional mobile-friendly galleries.

1. In order to work with LightGallery plugin, you should go to FTP or File Manager at Hosting cPanel and edit the file that is used for the page that includes LightGallery or HTML file used for the page you wish LightGallery to be added to. Edit it with any code editor like Notepad++, Sublime, etc.

2. Use Ctrl+F to perform search by ‘lightgallery’ keyword or simply scroll down the page to see gallery section:

3. Let’s take a closer look at all attributes available:

   Each gallery of multiple images uses data-lightgallery=”group” attribute for a parent element of a proper group, which includes separate images.

   Each image, included to a specific group, contains data-lightgallery=”group-item” and href attributes. You can locate here a link to the full-size image as well:

   

4. In order to change gallery content, just edit the path to images included into gallery and update caption below:

   

5. If you want to add such gallery to any other page, copy the code of the existing gallery, paste it to page (section) you want to add it to and edit images path and caption.

6. Save changes and re-upload file back to server after editing if you’re using FTP. Next, refresh site page to see changes applied.

7. Lightgallery allows you to create animated thumbnails for your gallery. You can disable/enable adding of thumbnail to the gallery of multiple images via editing at script.js file thumbnail settings to false/true.

   

8. Lightgallery comes with beautiful built-in animations. You can change the type of transitions by passing the transition name via mode setting at script.js file. You can easily create your own animations if you have CSS knowledge or check list of transitions here.

9. Lightgallery supports YouTube, Vimeo, VK and all other types of HTML5 video formats. Such as MP4, WebM, Ogg, etc.

   To display YouTube, Vimeo or VK video, you can paste the video URL, or share URL, which is provided by YouTube / Vimeo in the data-src attribute. The same way you display images in the gallery. Lightgallery will check the data-src attribute and if it is YouTube or Vimeo video URL, it will create the video slide.

   

10. If you want to create a gallery with iframe, insert your iframe link in data-src attribute and add data-iframe=”true” and data-lightgallery=”item”.

    

11. Share plugin allows you to share your images to Twitter, Facebook, Pinterest and Google plus. Open script.js file and add share: true setting in the section with lightGallery script initialization.

    

12. Lightgallery custom-html property lets you to include any kind of html in to the lightbox. And lightgallery hash plugin lets you to give unique url for each images. So you can add Facebook comments into lightgallery.

    

Now you know how to manage LightGallery extension.

See the detailed instruction on the developer’s website.

Feel free to check the detailed video tutorial below: