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!

5 comments:

  1. Instead of fluorescent lightboxes is that they use so little power. LEDs are much more energy efficient and may decrease power requirements considerably, reducing electricity bills, especially if a store runs several units in window displays 24/7. The advantage of this energy efficiency, for those that want to use LED lightboxes as portable advertising displays, is that they will easily be escape rechargeable batteries or maybe be plugged in to a car charger.

    ReplyDelete
  2. Indira Securities secure login for Online market trading and portfolio

    ReplyDelete

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

 
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