How To Add FancyBox to Blogger/Blogspot in 7 Steps

Hello everybody!

Long time no post, but I'm back today with a nifty tutorial on how to add lightbox effects to photos posted to Blogger/Blogspot.

Did you notice I didn't entitle this post "How To Add FancyBox to Blogger/Blogspot in 7 Easy Steps"?

That's because adding this feature takes some pretty advanced coding skills so be prepared to spend some time with this and look up other tutorials on the Web if my directions fail to give you results.  I installed this feature through trial and error and took me about four hours to get it right.

We'll be using a free tool called FancyBox which displays images, html content and multi-media "lightbox" that floats overtop of web page. Click on the photo (above left) of the glamourously bombastic Audrey Hepburn to see what I'm talkin' about!

FYI: this  photo and more very high quality images of famous screen stars can be grabbed for free from Dr. Macro's High Quality Movie Scans.

OK! Now that you've seen what FancyBox can do you want it too,  right? Let's get crackin' on how to install it!

HOW TO ADD FANCYBOX TO BLOGGER

Step #1
First of all BACKUP your template just in case you want to revert back to it.

Step #2
Download FancyBox for free!

Step #3
Rename the downloaded FancyBox folder to something simple like "fb".

Step #4
Upload the folder to your webhost. In this case you will need to use a hosting service to store the FancyBox files because Blogger/Blogspot does not offer storage capability. If you don't have a hosting service, you can get 2gb of storage from Dropbox for free ⬅ Please use this URL so I also can get some free additonal storage in referring them to you!

Step #5
Open the file "jquery.fancybox-1.3.4.css", change all the image URL to the correct image path. Scroll through the text box directly below to view an example of what it's supposed to look like. Remember to change all the URLs in the css document to your webhost. Upload the css file to your hosting site after you're done editing it.




Step #6
On Blogger, go to Edit HTML tab under Design, paste the following code before the </head> tag:



Make sure to change the js and css files to the correct path. I've highlighted the required changes for you!

Step #7
Upload your photos to your blog as you normally would. Then modify the code for the image under the "Edit HTML" tab from this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" imageanchor="1" style=""><img border="0" height="240" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" /></a>

 to this:

<a class="default" rel="fancybox" title:"Download FancyBox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" imageanchor="1" style=""><img border="0" height="240" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" /></a>

That is to say to insert the code class="default" rel="fancybox" title:"Download Fancybox"
in between the the "a" and "href" of  "a href=".

I'm still pretty new to this so I'm not sure if I can assist you if you have any issues.  I had to fiddle with it for awhile to get it to work, but it was worth it.  If you need support, your best bet is to read the "How To" page directly on the FancyBox website.  If you have better methods on how to install FancyBox, I'd appreciate (as would other readers of this blog) if you would post your tips in the comments below.