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.
- Adding the plugin codes.
- 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!
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.
ReplyDeleteIndira Securities secure login for Online market trading and portfolio
ReplyDeleteThis is one of the top online stock broking company.
ReplyDeleteOne of the famouse Newborn Photographer Perth
ReplyDeleteBest Perth Family Photographer in Perth
ReplyDelete