How to Add Light Gallery to Blog Themes

This Light Gallery serves to display the gallery of images or videos when we open a picture or video on a blog.

Light Gallery is a plugin for a website created by Sachin N on Github. To function in my opinion is almost the same as the Lightbox that already exists in Blogger, but with better features. Like responsive support, image gallery that can be shifted, a more attractive display, buttons to download images and fullscreen buttons, smoother transitions, and other advantages that the standard Blogger Lightbox doesn't have.

To add it to your blog, please follow the How to Add Light Gallery to the following Blog Themes

How to Add Light Gallery to Blog Themes

Before adding Light Gallery you should disable the standard Blogger Lightbox in Settings
First open the Template Editor blog, add the code below just before the template cover body like this </body>

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

For those of you who have optimized the image on Some Blog Article Optimization posts by removing imageanchor = "1" and changing border = "0" with style = "border: none;", use the code below

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[style]"});
//]]>
</script>

If you only want to display on a particular page, please wrap the code above with a Conditional Tag

Then look for post-body like this

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

The above code can differ depending on the theme used.

Change with this code

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

Save the template and finish. To see the results click the button below


For more complete settings, you can visit this link


So from me, good luck.

Turorial By : Arlina Design