If you've ever added images to a blog post using the latest Blogger editor, I'm sure you've noticed they automatically link to the full size source. These images are hosted by Google using a Picasa Web album associated with your Google account. It's quick and easy to use, for the most part, but I've always found something a little lacking in the implementation. Namely, readers navigate to a new page by clicking to see the full size image and must back navigate to continue reading. In the past I've dealt with this by targeting links to a new Tab/window. Now, I have something better.View Full Size Images Without Leaving the Page
Over the past few years a JavaScript known as Lightbox has become popular. There are many implementations each with their own unique methods and design, but each shares a common theme. Large images are retrieved and displayed after a visitor clicks a smaller thumbnail. Typically the background is darkened so the image can be better viewed as well. In recent days I took it upon myself to implement a small, lightweight script to automatically provide this functionality for Blogger users.
Adding the Script to your Blog
Installation is quite simple. Open your blog in Design->Edit HTML mode a few lines down you will see <head>. Now, copy and paste the below code under the <head> tag.
<script src='http://code.jquery.com/jquery-latest.js'/>DEMO
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'/>
Save your template and that's it, you're done. Images you post through Blogger and upload to your account will automatically reveal the full size version in a LightBox when clicked. Keep in mind, this script does not affect images hosted through other means. It very specifically looks for links around images on either blogspot.com or googleusercontent.com. Everything else is left untouched, including images outside of your blog post body.
Conclusion
This handy script takes the already easy process of adding images through the Blogger editor and supplements their functionality. There's no need to dig into HTML each time you add an image and it takes very little effort to take advantage of this feature. Simply add your images with the image tool Blogger provides and my script takes care of the rest. It cannot get much easier than that. Try it yourself and see what you think. I've installed it on this blog, though unfortunately I use images sparsely for the time being. Enjoy and best of luck with your blogging.
Post a Comment