Use Responsive Image Lightbox Alernative for Blogger Blogs by Magnific Pop Up

If you are using Blogger Mobile Template on earlier Blogger themes ie Simple, Watermark, Picture Window etc, you may have noticed that Blogger's post image lightbox is dis-abled on mobile views.

Here's the step-by-step guide on how to add an alernative post image lightbox with pop up image gallery -- Magnific Pop Up. Here's Magnific Pop Up plugin capabilities.

• Pop up is responsive & adapts to screen sizes
• Images display in a gallery
• Error handling when images un-retrievable
• Lightwieght & supports older web browsers

Adding this plugin requires 2 step process.

1. Adding the plugin codes.
2. Enabling Blogger widgets on Mobile views (for Blogger Mobile Template enabled).

How to Add Responsive Image Lightbox using Magnific Lighbox Plugin

This plugin is developed & maintained by Demitry Semenov, available at his Github repository. All files provided here is directly from the developer repository delivered using reliable CDN file service by RawGit.

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

Adding Plugin Codes.

• Go to Layout
• click +Add a Gadget
• select HTML/Javascript gadget
• copy & paste below codes to the widget body..

<link type='text/css' rel='stylesheet' href='https://cdn.rawgit.com/dimsemenov/Magnific-Popup/c8f6b854/dist/magnific-popup.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/dimsemenov/Magnific-Popup/c8f6b854/dist/jquery.magnific-popup.min.js' type='text/javascript'></script>
<script>
$('.post-body').magnificPopup({
  delegate: 'a[imageanchor="1"]',
  gallery: {
    enabled: true
  },
  type: 'image'
});
</script>

• click Save
• drag & drop to the bottom of your Layout
• click Save Arrangements

Enable Blogger widget on Mobile

• Go to Theme > Edit HTML
• click Jump to Widget
• select the newly added HML widget
• at mobile='no' attribute change to mobile='yes'
• click Save Theme

Then at Theme > Gear Icon > Mobile Template > select "Custom", click Save.

It is also good to check that you have disable Blogger default lightbox at Settings > Post Comments > Enable Lightbox > select "No".

Now refresh your blog page & click on any images in your posts. Enjoy!