Loading Images ... ... ... Please wait!

Thursday, September 4, 2008

Lightbox for Blogger/Blogspot Tutorial

Read updates below
If you have ever clicked on a picture on my blog you will notice they don't pop up in the normal way. I use lightbox v2 which was created by this guy. To make a long story short, it took a very long time for an idiot like myself to figure out how to make it work. I will try and give you some simplified steps so you can get it to work on your blogger blog. Wordpress and Typepad users you are on your own. For starters you will have to get into the HTML for both your blog template and posts. If you aren't comfortable with this, too bad.

Step 1

Before you do anything with your template html code you need to save a backup copy. (red circle 1). That way if you screw something up you can always start over. Next copy the following code and paste to your template html code (red circle 2) right before this crap (refer to 2nd picture below). Warning, if too many people use my code, and Google gets swamped and they kill my lightbox, I will modify my googlepages and you loose your lightbox also. Be ye warned! (with a pirate sounding voice). After adding the code save your template.



Step 2
Posting pictures. To start out I always shrink my pictures to 800 pixels. I use Picasa, they have a new version out that is cuter than the previous one. If you don't know how to do this, Google it. You can make the pictures larger but when they open in lightbox they will be huge and a big pain in the butt.

Upload your pictures like you normally do in blogger. These are the settings I normally use to upload pictures. After you get things arranged you will need to edit the post html.

After you get to the html editor I usually use the find and highlight feature in FireFox under edit and find. I search for "-h" and highlight all, then add the following code as shown below.

 rel="lightbox[add some words here]"

Here are some variations of the lightbox code. After you add the lightbox code you will need to remove the "-h" 's as this opens the picture in a new window. That "-h" thing only took me about 3 days to figure out. So after you remove all the -h's and add the code, you are ready to publish.


Final Thoughts

There are some drawbacks to using the code. If your blog page doesn't load completely before someone starts clicking on pictures, the script won't load right and the code won't work. That is why I have the loading page screen that pops up when you go to alaskamassey.
Feed readers also can't access the code. Well, I use Google reader and it won't pull the pictures up right. Some readers may work fine.
If the code won't work for you let me know. I will probably act confused and tell you to go and figure it out on your own. Enjoy. ~Erik

Update 10-25-08
There has been a request for a Preloading page. It has been a while since I have added this HTML to my page. Here is the code that needs to be added. The first portion goes at the top of your page, and the last section goes at the bottom of your HTML page. The easiest way to see where the code goes is to view the source code on this page (right click with FireFox, IE right click or go to view) . Hopefully this works. I changed the .gif file to be a bit more generic than the Alaska Massey logo.

As a side note I also opened a flickr account and am using that to host my pictures. It allows pictures to be viewed normally when accessing with a feed reader. The only downside is that after 200 pictures uploaded you have to upgrade to a pro account which is 50 bucks for 2 years. I guess if I get tired of paying all my archived pictures will be lost. Maybe flickr wasn't a good idea.... I have also heard that Google page creater will be shut down in a year or so which means I will have to transfer the lightbox script to a new host.

If you are able to get everything to work please leave a comment with a link to your site so others can see other working versions of lightbox. Good Luck. ~Erik

Update 12-18-08
Lightbox has been spotty the last few days due to an overusage of my google pages. Google has a bandwidth limit that has been exceeded so...I am in the process of finding some other place to host the lightbox script. If anyone knows a good spot to host let me know. Thanks.

42 comments:

Johnna said...

This would make a great "Community School" course topic. I think it is your duty to educate the masses and make the blogging world a more beautiful place.

Smedley Family said...

sweet man! i looked it up and found it a while back, but didn't want to copy . . . now i got permission and sweet tutorials!!!! whew! very nice . . . very nice indeed :D thx

Smedley Family said...

heads up . . . sheri dew and hilary weeks are staying at the same place!!

josh said...

dude, i love your style

Lída said...

This is really nice, but can´t you write similar manual for making preloader? Because when i need it for right function, it is this article quite for nothing for me...

Lída said...

Yes, now it is working even without preloader, but before I had maybe different mistake in html code. Thank you, I did it exactly according your tutorial... Always I wanted to have lightbox in my blogger and only according this tutorial I was successful...:-)

Dave said...

Thanks a lot for posting the preload page info. I have it working on a test blog I created. Eventually I'll be using the code for my sister's blog; she's teaching english in Korea for a year and wants to keep family and friends updated.

I don't know much about programming and I may have intitially done something wrong, but I had to alter the script a little to get it to work for me:

I added: /DIV (between <>, blogger won't let me just write it out in these comments) as a last line to the script that goes in the body. Without it I got the following error: The element type "DIV" must be terminated by the matching end-tag "

Another thing I did is instead of simply adding the script to the body, I replaced the original blogger line: body (between <>), with your first line: body onload='waitPreloadPage();' (between <>). I just assumed that both weren't needed, and it worked!

Click my name above to see the test blog.
Thanks again Erik,

Dave

Jennifer Rickard said...

this works like a charm! thanks so much...just one question though. I actually have it set up and attached to a link but when i click on it, the lightbox shows up but it blacks out the background, not just fades it. any clue?

Alaska Massey said...

Jennifer, Looks like it is working now on both IE and Firefox. Nice website. ~Erik

tnuz said...

oh my i really really wanna thank you for this great script! i've been bangin my head here and there visiting sites about lightbox .. keep up the good work Eric!

Rgrds from Borneo, Kota Kinabalu
tinuz

Kamy22 said...
This comment has been removed by a blog administrator.
Luftmensch said...

I salute you sir for taking upon you the burden of hosting these scripts/files.

I was looking for a place to host mine, but saw that the new googlepages replacement didn't accept .js files, and I lacked a webhost of my own -- so this has been more than helpful.

The least I can do is to host the .css/loading-image on my google-sites account, I guess.

Dunno if a "good word" about this place on my relatively unknown blog is worth anything, but it's always something?

Oh, and thanks very much :)

j3rn3j said...

I just love you.....thank you for that...

Jason Andrew Bowles said...

I have proofed multiple times and can find no errors, but it will not work. I am wondering if there is js running that is interfering with lightbox.js?

If anyone has the time to check it out, it would be most appreciated.

First photo on the page....http://www.jasonandrewbowles.com/search/label/Sculpture

watashi Yancha Bouya said...

thanks for the tutorial... its really helps me... nice try...

Dharmadee said...

Cool tutorial... I've tried, and works well. Thank you...

Ricardo Cezar said...

Hey mate! First of all I want to say you rock!

I have tried at least 5 different blogs and all the codes got a fatal error in my blog like "IE caused an error and will be aborted, website will now close). But your works just like butter. Thank you so much!!!!!!


I didnt get that [some words here] feature. I havent got any words under my picture after inserting my little caption between the []. What is it supposed to do otherwise?

Ricardo Cezar said...

hello again! Yes, I found the thing for the [], sorry for bothering again. By the way, the set of images works beautifully! thanks again

मनोज said...

i will say same thing as jennifer. this lightbox cannot remain behind flash material and youtube videos. for my web i have flash on the side and youtube below.so it comes behid those stuffs. it is not good for blogger.

Anonymous said...

How do I upload the Lightbox JS to a server and not have to use your server? I've tried multiple times but nothing works?!

indiekad said...

Thanks man! u r really helpfull..

chestaz said...

this article is not function anymore
try look at this example...
is working http://c88i.blogspot.com/2009/11/lightbox-c88i.html

katie said...

It works perfectly when I link to your script, but not when i link to the very same files that i've self-hosted elsewhere..! my site's http://katiedoesjapan09.blogspot.com

Anonymous said...

yo... thanks for post

Anonymous said...
This comment has been removed by a blog administrator.
bikefix said...
This comment has been removed by the author.
bikefix said...

Erik,

Thanks for the awesome tutorial. I could get it to work using your files... When I pulled them all down and hosted them myself (at sites.google.com), it works inconsistently (this morning not at all and the site's taking ages to load). Is there anything that you think I might have overlooked? Thanks for your help,

marc b
www.bikefix.net

Anonymous said...

Hey I'd like to congratulate you for such a terrific made forum!
thought this is a nice way to introduce myself!

Sincerely,
Sage Brand
if you're ever bored check out my site!
[url=http://www.partyopedia.com/articles/easter-party-supplies.html]easter Party Supplies[/url].

Anonymous said...
This comment has been removed by a blog administrator.
Carl said...

Uh oh, did you pull off your code or is Google's service just down right now?

daves said...
This comment has been removed by a blog administrator.
Carl said...

For some reason I cannot get the preloading screen to work. I've done the same things Dave did above, but it does not function. I don't receive any errors, it just acts as if the code is not even present. Any ideas? Does anyone happen to want to look at my code and see what I'm doing wrong?

Thanks!

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Wan Ahmad Nabil said...

It's working on my blog. feel free to visit, nakbebel.blogspot.com
I also serve for malay version. :)

Bulma said...

nice tutorial - thanks! but when I add this script to the page the 'obserevers widget' doesn't work...

slutty bitch said...

Great tutorial.
For me worked putting the lightbox code within head section. And i dont experience any loading problems.

Markus said...

Great tips, lightbox works very well with Blogger, check here for more tips:

http://www.high-on-it.co.za/2011/02/adding-lightbox-to-blogger.html

mac-and-me said...

try this
http://mac-and-i.blogspot.com/2011/03/how-to-integrate-lightbox-in-your-blog.html
works without editing posts

Manuel Garcia PH said...

Hello i have a problem with lightbox. i have script(http://java-templates.googlecode.com/files/jquery-1.4.3.min.js) on my blogger. I used that script for my navigation drop down menu. if i will remove that script, lightbox will work, but my menu will not. vice versa.. do i need to sacrifice one ? or there is a solution ?