After receiving a request from Priya, who is very much interested in photography and wanted to have her photoblog in blogspot. But the only thing that was refraining her to do so was.. the behavior of blogger to show the enlarged version of the picture in a new window. Like many other’s she too felt that this would inadvertently take here viewers away from her page.
In this quest with priya.. i landed at an excellent lightbox code at Huddletogather by Lokesh. This entire script( s) is Lokesh’s work and I am putting this here to let my readers know as to how wonderful this feature is.. A must have for any photoblog.. Even otherwise..its a great way to zoom the pictures in your blog..See it in action here. Read more for instructions on how do this
- SAVE AND BACK UP YOUR TEMPLATE
- Add the following lines just above the </head> tag in your template
<script type=”text/javascript” src=”http://deepa7476.googlepages.com/prototype.js”> </script>
<script type=”text/javascript” src=”http://deepa7476.googlepages.com/scriptaculous.js?load=effects”> </script>
<script type=”text/javascript” src=”http://deepa7476.googlepages.com/lightbox.js”> </script>
<link rel=”stylesheet” href=”http://deepa7476.googlepages.com/lightbox.css” type=”text/css” media=”screen” /> - You may choose any of the layout provided by blogger for uploading pictures ( Small – Medium – Large).
- If you notice the html part of the image code you will see something like
<a href=”url of the picture at blogger”>
< img src=”url of the pic..the full size” style=”width – height etc depending on the layout”/>
</a> - Here is what you need to do to activate the lightbox code
<a href=”url of the picture at blogger” rel=”lightbox”> < img src=”url”> - If you wish to show the pictures as collection (…say..flowers..animals..etc etc).. then all you need to do is
<a href=”url of the picture at blogger” rel=”lightbox[flowers]” > < img src=”url”>
<a href=”url of the picture at blogger” rel=”lightbox[flowers]” > < img src=”url”>
<a href=”url of the picture at blogger” rel=”lightbox[flowers]” > < img src=”url”><a href=”url of the picture at blogger” rel=”lightbox[picnic]” > < img src=”url”>
<a href=”url of the picture at blogger” rel=”lightbox[picnic]” > < img src=”url”>
<a href=”url of the picture at blogger” rel=”lightbox[picnic]” > < img src=”url”> - The above step does not involve blogger labels… so no conflict on codes.
- Remember that the lightbox code will get fuctional only after the entire page loads.
This code works for me and I hope this works for you too. Drop a comment and let me know
ADD ON:-
If you want to have a “Zoom Cursor” appear over your pictures as shown here.. the this is waht you need to do
LOCATE THE FOLLOWING IN YOUR TEMPLATE
And add the line shown in red.
.post img {
cursor:url(http://deepa7476.googlepages.com/ZoomIn.ani);
}
This is best viewed in IE. I dont know if FFox supports cursors in Stylesheets.
Your appreciation is my motivation
Deepa,
You didn’t add the lightbox?? Only zoom cursor works..
I did include, but it doesn’t work for al pics and it tries to load and I don’t see the image. May be I used the rel=lightbox somewhereelse.
Deepa,
So weird with IE, your photoblog works fine now.
Hats off to you smart techie:)
Pria..
Glad it works for you..enjoy
I had some bug and fixed it later checking the net. I still have problems when it loads. I donno if its becoz of IE.
Thanks Deepa.
Pria..try deleting cookkies and temp files and perform a clean up..Restart and then see.. may be its the browser after all
Deepa:
Am I asking too much?? I donno.
In few templates regarding comments code, even before in your blog u click comments, you see in dashboard itself. I have such type in my photoblog template. What r the possibilities to include such type of code in other blogs? Any suggestions??
Priya.. can u mail me the template along with the screen shot of “appreaing comments in the dashboard”
Deepa,
Will send it girl.
Hey Deepa, thanks for dropping by on my page. My apologies for calling you a “him”. I already corrected the post. Oh yeah, I found a better alternative for Lightbox. Search “Slimbox” in my site or in Google. It’s by Cristophe Beyl. It’s more efficient and you don’t need to wait for the entire page to load. It’s also fully-compatible with Lightbox. You might want to check it out 🙂 Anyway, keep up the good work, thanks for the tips. 🙂
this tutorial is simply great! finally, i hv “almost” solved the lightbox mystery! hv sent you a “small” mail explaining that “almost” part! still, thanks a TON for taking time out to prepare this tutorial! awesome job!!! 🙂
@Anon
Thanks for the compliment..you made my day today…
Yes got your mail.. will reply ASAP
Thank you for this. Question: How can I make the images appear larger on the page than the three given options (small, medium, large)? I would like it to look like this,size-wise always: http://channingjohnson.blogspot.com/
@ts..
Welcome..glad to know taht you liked this post
Blogger by default has some standard hight & width for small, medium,large layout of pics
You will notice this in the html code (within img tag)
if you want the same size always, then here is somethin u can do
In u r template..there is
.post img
{
width:300px;
height:300px; (as u like it)
}
Save template
Next ever time u add a pic.. u must carefully remove the height and width information from the img tag… this is tedious.. but cant help it.
hope this helps
Deepa