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.

Quick Update

Hey everybody!

It's been awhile, I know.  I just wanted to post a quick update that I'm redesigning my website and it's going to affect the feed of this blog as I transfer domain name servers.  It's because I will no longer be using Blogger as a custom domain name but am reverting back to the Blogger domain name.

For example: when you clicked on any page on this site it used to read something like "http://glamourbomb.com/anypage" in the address bar.

However now if you click on a page it will read something like "http://glamourbomb.blogspot.com/anypage" instead.  Like I said, I'm reverting my custom domain back from Blogger and using it on a brand new site.

I'm NOT abandoning the Blogger platform. I will still be blogging here.  I just want to do more than what Blogger can provide.  I want to actually open a shop with a cart service and I haven't really been able to do that on Blogger except here and there when I insert a PayPal button in a blog post.  And sometimes what I have to offer doesn't fit Etsy's selling guidelines so I have to do indie and set up my own website with a store.

All these changes are going to effect this blog insofar that you may see double posts or posts that are old show up for some weird reason. Anything can happen until the transfer is complete. I'm sorry about that. At least it's just hiccups and not full on burps!!!   :)

I'll be posting an update when all is said and done but for now if you're interested to take a peek at what I'm up to, I've put up a basic splash page for now and you can see  it here.