Blogger-Blogspot Set-Up Lightbox2 to onClick Enlarge/Zoom/Magnify Image

This little Tutorial Show you how to Enable Javascript Image Magnification in Blogger Blogspot. To See the Final Effect of the Lightbox2 Zooming Click on the Setup Instructions Image to your Right.

Lightbox2 is a Wonderful Tool for your work. Easy to Setup and Light in Javascript Weight. Inside Instructions Activation on Point 2 you will find also Clear Notice about Grouping Images to have a manual Slideshow like Effect.

Prerequisite: A Web Space somewhere to Upload Lightbox2 Stuff...(You Dispose of Many Free Choices like for Example: googlesites:)
For Example you can Use Google Sites like a Blogger Storage Space.

1. Download Lightbox2 Javascript Library:

   Javascript Lightbox2

   The Link Contains the Lightbox2 Javascript Library.
2. Edit the lightbox2/css/lightbox.css File and Change:
   

   '../images/prevlabel.gif' to 'http://URLToWebSpace/PathToLightbox/images/prevlabel.gif'

   '../images/nextlabel.gif' to 'http://URLToWebSpace/PathToLightbox/images/nextlabel.gif'

3. Edit the lightbox2/js/lightbox.js File and Change:
   

   'images/loading.gif' to 'http://URLToWebSpace/PathToLightbox/images/loading.gif'
   

   'images/closelabel.gif' to 'http://URLToWebSpace/PathToLightbox/images/closelabel.gif'

4. Upload LightBox2 into your Web Space at the Right Location
5. On your Blogger Go to: Design -> Edit HTML
6. Click Inside the "Edit Template" Area
7. Search for the String "/body"
   
   • Mac: Cmd+F
   • PC: Ctrl+F
8. Right before </body> Tag Insert the Javascript Links:
   

   <script type="text/javascript" src="http://URLToWebSpace/PathToLightbox/js/prototype.js"></script>
   <script type="text/javascript" src="http://URLToWebSpace/PathToLightbox/js/scriptaculous.js?load=effects,builder"></script>
   <script type="text/javascript" src="http://URLToWebSpace/PathToLightbox/js/lightbox.js"></script>
   

9. Search for the String "/head"
10. Right before </head> Tag Insert the Css Link:
    

    <link href="css/lightbox.css" media="screen" rel="stylesheet" type="text/css"></link>
    

11. Click 'Save Template'

Now your Lightbox Javascript Magnifier should be Ready and Working!
From some Times during Installation you should be Thinking: "How does I need to Setup Lightbox to Magnify a Picture?"
The Answer for "The Magic to Works" you need to Prepare 2 Pictures:

• A Thumbnail Picture
• A Magnified Picture

Next you Put:

• The Magnified Picture inside the Directory:
  

  URLToWebSpace/PathToLightbox/images

• The Thumbnail Picture inside the Directory:
  

  URLToWebSpace/PathToImages

Now the Magic is Ready to Works with:

<a href="http://URLToWebSpace/PathToLightbox/images/magnifiedPicture.jpg" rel="lightbox">

 <img src="http://URLToWebSpace/PathToImages/thumbnailPicture.jpg" /></a>

To Get some Extra-Insight Look this other Guide

HOW to Find Files/Directories/Images on Linux Command Line

How-to Search Files, Icons, Images or PATHS with the Locate Command.