ThickBox Effect Image View – Blogger Tutorial

You can use Thickbox in Blogger. It is a cool image preview effect, which displays images with a dark backgroud to provide a clearer view and a much nicer presentation for your images through light weight animations, which utilizes the light weight JQuery library.

Here’s a a ThickBox effect image demo on Blogger/Blogspot

Instructions:

Place JavaScript (JS) and Stylesheet (CSS) inside the Header:

• Copy the code below and paste it before the </head> tag of your HTML template.  

<link href="http://www.blogfixes.com/shared/css/thickbox.css" rel="stylesheet" type="text/css"/>
<script src="http://www.blogfixes.com/shared/js/jquery.min.js" type="text/javascript"/>
<script src="http://www.blogfixes.com/shared/js/thickbox-compressed.js" type="text/javascript"/>

Add the Thickbox class to your images

• Set the class attribute thickbox before the href= tag of your your image code.

class="thickbox"

Link to actual images and not HTML pages

• Blogger naturally links to html pages, which are not the actual images. Therefore you need to change the links to the actual image source.

Example:

href="http://www.blogfixes.com/image.jpg"

Video Tutorial:

Here’s a video tutorial that will show you detailed instructions on how to add a thickbox effect on blogger images.

Terms of Use:

This is a ReviewWare – which means that in order for you to use the code above you have to make a review on this tutorial in your blog, simply because I am hosting the scripts and you are using my bandwidth. BlogFixes.com reserves the right to deny js and css hotlinking to anyone who violates this agreement. For those who doesn’t agree on the terms, you can host the scripts elsewhere, after all ThickBox is a free script that everyone can use. Thank you.