How To Add Lightbox to Blogger (Step 4-5-6)

(Continue)

Step 4. You will need a text editor. A word processor like OpenOffice.org or Microsoft Word is not suitable. Notepad, or any other editor that doesn't support any kind of formatting will do fine.

Step 4a. Open lightbox.css in your editor. You need to change two settings. Use your editor's find function to find them if you're having trouble locating them. Replace:

Code:

url(../images/prevlabel.gif);

with:

Code:

url(lightbox-prevlabel.gif);

And

Code:

url(../images/nextlabel.gif);

with:

Code:

url(lightbox-nextlabel.gif);

Step 4b. Open lightbox.js in your editor. You need to search for and then replace:

Code:

fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif',

with:

Code:

fileLoadingImage: 'http://your-google-id.googlepages.com/lightbox-loading.gif', fileBottomNavCloseImage: 'http://your-google-id.googlepages.com/lightbox-closelabel.gif',

Where "your-google-id" is, um, your Google id. If you're not sure about this part, it's OK to wait until we've uploaded the images, at which point you'll be able to copy+paste their URLs.

Step 5. Head to your Google Pages site manager. If you closed the site manager, you can get to it by going to http://pages.google.com/ and logging in.

On the right side is an "Uploaded stuff" section. Click the arrow to open it up if it is not already open. There should be a small "[upload]" link at the bottom. Click it.

Now, for each of the files we copied out of the Lightbox zip, click on the "Browse" button, and select the file on disk. This will upload the files to the website. If you weren't sure about the image URLs for lightbox.js earlier, you can upload lightbox-loading.gif and lightbox-closelabel.gif now, click on their names when the upload is complete, and then copy+paste the URL from your browser's address bar.

Just double-check that the following files appear in the uploaded file list.

• lightbox.css
  
• lightbox.js
  
• lightbox-builder.js
  
• lightbox-closelabel.gif
  
• lightbox-effects.js
  
• lightbox-loading.gif
  
• lightbox-nextlabel.gif
  
• lightbox-prevlabel.gif
  
• lightbox-prototype.js
  
• lightbox-scriptaculous.js

Step 6. Open up your blog's settings page. Go to the "Layout" tab, and select "Edit HTML". Locate the "" tag in the template code. Insert the following before the </head> tag:

Remember to change "your-google-id" in the URLs. Again, if you're not sure about the URLs, go to the Google Pages site manager, right-click on the links for the uploaded files, and select "Copy Link Location" or "Copy Address." Clicking on the links directly will usually just download them.

Save your template.

You're done.

You can now follow the directions at http://www.huddletogether.com/projects/lightbox2/#how under "Step 2 - Activate".

From ~> http://blogazeroth.com