Light Box in Blogger

Friday, February 19, 2010 Posted by jagadeesh
In this post i would like to tell you how to enable light box viewer for blogger images.
Step 1:
Go to Lytebox home page and download lytebox javascript file and lytebox css file.
Step 2:
Go to google sites and create one site. after that create one page. select File cabinet in given options enter name and create page. Upload files using add files. select preview page. copy the url upto .js and also copy the url of .css file
Step 3:

now insert script and styles in blogspot template. goto your blog and edit html
paste this code after <head> tag.
these urls you can add from google sites. if you don't want to create google site and uploading i will provide those links

step 4:


now apply this lytebox to images in our blog:
insert image into your blog and go to edit html . you can find your image tag and anchor tag in your code.




<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitc5hk0QRoMArshtq4orE2l7EanmumMk0l4a0ieDVc_j_OfWr99iGroPbWm8O9GTBNzcF1SLeM1QWTvWyR5R0S000tTPO-4VXMul03xTP1vHnUzusDeFKMO0tfZiwIvUiF79eRm-tCJNU_/s1600-h/edithtml.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitc5hk0QRoMArshtq4orE2l7EanmumMk0l4a0ieDVc_j_OfWr99iGroPbWm8O9GTBNzcF1SLeM1QWTvWyR5R0S000tTPO-4VXMul03xTP1vHnUzusDeFKMO0tfZiwIvUiF79eRm-tCJNU_/s320/edithtml.JPG" />
</a>

in this anchor tag insert rel="lytebox"
important note: remove -h after s1600 in anchortag. otherwise it will not work
you can see demo by clicking above image

Labels:

Post a Comment

Subscribe to: Post Comments (Atom)