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.
For Example you can Use Google Sites like a Blogger Storage Space.
-
Download Lightbox2 Javascript Library:
Javascript Lightbox2
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'
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'
Upload LightBox2 into your Web Space at the Right Location
On your Blogger Go to: Design -> Edit HTML
Click Inside the “Edit Template” Area
Search for the String “/body”
-
Mac: Cmd+F
-
PC: Ctrl+F
Right before Tag Insert the Javascript Links:
Search for the String “/head”
Right before Tag Insert the Css Link:
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
