This is an uber easy lightbox trick for those who are comfortable editing their blogger template code. After implementing this script, you will have automatic lightbox for your images without the need to add rel="lightbox" to your images within posts! If you don't know what lightbox is, click on the above image for an example.
Select Code & Copy:
]]>
Add these scripts to your template by going to Design>Edit Html. Paste in this code right before the tag. Save your template, and you're done!
 |  |  |  |  |  |
|---|---|---|---|---|---|
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
BellaTYPE Said,
Pimpen share! I am so behind the times. Lightbox is a must.
Posted on December 18, 2010 1:30 AM
starsunflowerstudio Said,
Oh you are not at all! You have a much fancier lightbox thingie on your other blog. You are great inspiration.
It's odd, there are no tuts for this out there. Well, for lightbox without adding the rel= My partner found the code for it on a forum somewhere.
I'd love to take the time to dig into the code at some point to figure out how to make the other lighbox thingie's do it automatically as well.
Excuse the lack of a better name for them, as my brain is fried atm, lol!
Posted on December 18, 2010 2:40 AM
Earl Said,
Lovely. Thanks for this.
Posted on December 20, 2010 9:54 PM
Steve Heinz Said,
Hi starsun,
this is great - but I need help.
I only want to display one image at a time... without the "next" option. Your code appears to be linking all the jpgs on my website together... so each time you click one picture, it says "1 of 12". But I only want to display 1 at a time.
How do I unlink the pictures? Can you help with this?
Thank you
Posted on December 21, 2010 7:10 PM
starsunflowerstudio Said,
@Steve Well I tried a quick n' dirty commenting in the css to remove the arrow and numbers -- was able to get the arrow to disappear but not the numbers.
In order to remove the photo count, one would likely need to modify this jquery script:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
I'd have to pick it apart and read through all of the functions to see where that part is being defined in the script. Here's the commented css with no arrows:
http://dl.dropbox.com/u/7022300/SSFS-WEB/_SCRIPTS/blogger_lightbox.css
Posted on December 22, 2010 11:27 AM
Steve Heinz Said,
Thanks Starsun.
If you figure out a way to remove the "1 of 12" thing at the bottom, please post a reply with the code. I would try and fix it myself, but unfortunately I don't have the know-how,
Thanks again for your help.
Posted on December 22, 2010 12:55 PM
starsunflowerstudio Said,
@Steve When I figure it out, I will definitely post an update here. :)
Posted on December 22, 2010 1:43 PM
Steve Heinz Said,
Great Starsun, thanks :-) I'll keep checking back for any updates.
Posted on December 22, 2010 3:58 PM
Like Sims Said,
Very nice!
Hey, would not create a script like this to Shadowbox? It's lovely.. :D
Byes
Posted on January 25, 2011 11:58 AM
Rute Said,
Wow!
Perfect.
Thank you very much.
Posted on January 26, 2011 2:09 PM
Steve Piper Said,
This is a terrific, easy hack, I love this. Thanks for sharing.
Posted on February 12, 2011 2:24 PM
George Said,
Thank you very much,i need this,again thanks...
Posted on February 26, 2011 4:26 PM
julius Said,
I was thinking that can you get Flickr images to any auto-lightbox?
Posted on September 13, 2011 12:38 PM
starsunflowerstudio Said,
@Julius I just tried it and flickr does work with lightbox. I just added the image by url with the insert image dialogue in blogger.
Posted on September 13, 2011 4:06 PM
Caroline (Frogmum) Said,
This works a treat ~ thanks :D One thing though ~ the script needs a tag at the end to make it work :D
Posted on January 17, 2012 11:04 PM