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.
 |
| An Example |
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'/>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.
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'/>
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.
21 comments :
awesome...so simple script, thanks master \m/
not working!!! how to write anchor image?
The script isn't setup for you to write your own html tags. It is designed to automatically detect images added using the Blogger post editor, then change how they work. But here's what the script looks for. First, the image must be within an anchor tag like this:
<a href='http://4.bp.blogspot.com/-JqGhaP-Eq5U/TTR9-FuKx4I/AAAAAAAAARY/SGb89NmzfmI/s1600/Themes2.png'><img src="http://4.bp.blogspot.com/-JqGhaP-Eq5U/TTR9-FuKx4I/AAAAAAAAARY/SGb89NmzfmI/s200/Themes2.png"></a>
Then the href of the link must be either to an image on blogspot.com or googleusercontent.com. Once those criteria are met, my script alters the A tag and the img tag so that when clicked, a lightbox is activated.
The script is meant for average blogger users that don't want to edit the HTML directly and do not host their images through another provider. It's the only way I can predict the tag layout accurately to auto process. Otherwise, I'd need to make the script require HTML editing to flag specific images for the lightbox. I'm comfortable using the code that way, though I doubt most are.
ic ic...
this script worked by default syntax image if we has finish upload a image?
this is work...
cheers \m/
Many thanks bud!
Thank you so much, works brilliantly and really clear helpful instructions so even a complete novice like me got it to work first time.
Thank you soooo much! My other jquery coding had failed, but this was a super easy fix :)
@nikki, I do not know what "read more" script you're referring to and you left no link so I cannot view your blog to see. The built in read more from Blogger does not have any issues, however, as demonstrated by my use here on each post of any length.
Many Thanks, working for me.
We really like this - simple and elegant- but there is one issue( specific to us) - the images are so large that the close button gets covered up with our wibiya tool bars on all of our websites. Is there a way to set a max image size in my html to make them 10% smaller?
forhuntersbyhunters.com [4hxh@forhuntersbyhunters.com]
Override this style in your template
#js-lightbox img { max-height: 90% !important; }
That will limit all images to 90% height of the viewers window
You are the Man! This is simply awesome- no fuss and does exactly what we want it to do.
I'll try it and out get back to you. Shared.
#js-lightbox img { max-height: 85% !important; }
This worked perfectly! We all THANK YOU!
Book marked. I can't believe after screwing around with all types of lightbox code and not getting the results we wanted this simple code did everything without any bugs or issues and the image can be customized as well.
Thumbs up and probably the best addition to our websites.
I have seen code online to manually ever images - what a drag- more need to know about this - Spreading the word!
Glad you like it. I may have to put some time in cleaning it up a little more for a version 2.
We will be waiting for it!
Do you know of a way to adjust the size of the images displayed in the lightbox?
sir he create one problem when i m click on the image show to image first image close then second image close whats problem ?it
Hiya James.
I have tried coping over the above script to my template but it doesn't work still. Followed your simple instructions to the letter but what could I be doing wrong? my blog http://dogtime2shine.blogspot.co.uk/2012/07/dog-drawings_09.html I'm also trying to prevent a click option on my other posts with images as they're meant only for reference not showcasing... hope you can help?
many thanks
@Kelly,
This script is somewhat outdated as Blogger(at least in the US) added its own lightbox handling. Looking at your site though they've not done it for the UK templates it seems.
In any case, your template does not include a post-body class on each post. Instead there's only class='entry', so the script fails to select any images. To use this script you'll need to find in your template where the entry code is and add along side of it post-body. Then the script should work for any image with a blogspot.com URL.
James
Post a Comment