Blogger Image Gallery Lightbox with Caption by Magnific Js

Blogger default image gallery lightbox does not provide an option to display blog post image caption or titles when viewed & triggered by readers.

However, Blogger blog users can easily add an alternative image lightbox functionality if require to achieve this.

Here's the full tutorial on how to add an alternative image lightbox on Blogger blogs powered by Magnific Pop: https://www.airinaa.com/2018/04/use-responsive-image-lightbox.html

In this tutorial we will extend earlier Magnifc Popup functionality to display blog post image caption or title in a lightbox display.

How to add Magnific Popup Image Lightbox Caption

First, check your post images if  the "title" properties is added. If you have not, here's how:-

• At post click "Edit"
• Select & highlight the post image.
• At image toolbar, select 'Properties"
• At "Title Text" field, add your image title.
• Click Save
• Continue using earlier steps with other post images
• Click "Publish" to update post.

Updating Magnific Popup Functionality.

If you have not installed Magnific Poup at your blog, use this tutorial & guide to install one. No theme editing is required!

• At your Magnific Popup widget settings find below:-

<script>
$('.post-body').magnificPopup({
  delegate: 'a[imageanchor="1"]',
  gallery: {
    enabled: true
  },
  type: 'image'
});
</script>

• Extend Magnific Popup "image" object to grab the image object title attribute values & to use/apply at image lightbox. Add highlighted yellow like below.

<script>
$('.post-body').magnificPopup({
  delegate: 'a[imageanchor="1"]',
  gallery: {
    enabled: true
  },
  type: 'image',
  image : {
    titleSrc: function(item) {
      return item.el.find('img').attr('title');
    }
  } 
});
</script>

• Click Save to save your widget.
• Refresh your blog posts & view the results.

A working example can be seen & used at this current post & Blogger theme. Enjoy!

References:

• Documentation: Documentation and getting started guide.
• Examples: Examples and plugin home page