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

January 14th, 2012 by Regaz

This little Tutorial Shows You 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 Point 2 you will find also Clear Notice about Grouping Images to have a manual Slideshow like Effect.

Blogger On Fire

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
  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 Tag Insert the Javascript Links:



  9. Search for the String “/head”
  10. Right before Tag Insert the 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:

 
To Get some Extra-Insight Look this other Guide
HOW to Find Files/Directories/Images on Linux Command Line
(Visited 4 times, 1 visits today)
Share on Tumblr

Tags: , , , ,