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.

Tutorial Add Magnific Popup Image Gallery Lightbox with Caption

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:

2 comments:

  1. Very useful article for the Blogger. I really happy for your post. Thank you so much.

    ReplyDelete

Insert search keyword(s) & press enter...

Subscribe & Get Latest Stories via Mail...

 
Our website development is made possible by displaying online advertisements.
Please consider supporting us & our projects by disabling your Ad Blocker. Thank You.
Our website requires javascripts turned on for best user experience.
Please consider to turn on your web browser javascript. Thank You.
GDPR: Data submitted at our site is managed by 3rd party processors. Read more on how data is collected, managed & processed at our site. Learn More