Adding Fancybox to blogger.com

Fancybox for jQuery is another one of the plugins which I really like right now. I came across Fancybox one day in work whilst I was developing a web application where I wanted to show a map, but didn't really want to go down the route of using Google Maps API to showing my own map - that all seemed far too cumbersome when I could simply open Google Maps, but thats no fun now is it!!!

So along came Fancybox to save the day and make that really boring link to Google Maps so much more pleasurable.

OK so Fancybox can do so much more but for the purpose of this post I will show you how to set it up to open up a pretty iFrame popup when you click on a link you have added to your blog.

As ever with my jQuery posts, you can try this out on this very page - if you haven't clicked a link above already, go ahead and click this one below:

View: Google.com

Pretty aint it?!?!

A little preparation is key:
First things first, Fancybox doesn't appear to have a CDN, so we are going to need to download the source files, extract them and store them somewhere online where you can reference them from.

• Download from Fancybox.com
• Extract the files, you will need (at the time of writing this):
• jquery.fancybox-1.3.4.css
• jquery.fancybox-1.3.4.pack.js
• All images from the fancybox folder.
• Now you need to store the files (all in the same directory) somewhere online where you can reference them.
• You will need to know the web address in a moment (lookout for YOURDOMAIN.com)....

Let's take a look at the code:
Firstly we need to add the plugin:

1. Login to your blog. At the top right of the page (for me anyway) click Design
2. Click on the Edit HTML tab.
3. Find the line </head>
4. Just before the line, you need to add the following code:

<script src='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.js' type='text/javascript'/> 
<link href='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.css' rel='stylesheet' type='text/css'/>

5. Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:

$("a.inlineLink").fancybox({
     'width'             : '75%',
     'height'            : '75%',
     'autoScale'         : true,
     'enableEscapeButton': true,
     'speedIn'  : 500,
     'speedOut'  : 500,
     'padding'  : 15,
     'overlayColor' : '#123',
     'transitionIn'      : 'fade',
     'transitionOut'     : 'fade',
     'type'              : 'iframe'
 });

That's the control's in place, now all you need to do is a little tweak in your post, and voila......

1. Create your post as you normally would, including using the Link feature to add links within your post.
2. Once completed, you will need to edit your HTML, so click on the Edit HTML tab.
3. Now find the code for the link, taking the example above link to Google.com it will look something like this:

<a href="http://www.google.com/">View: Google.com</a>

4. Now we need to add the trigger, so when the user clicks the link it open Fancybox:

class="inlineLink"

5. The final code will look something like this:

<a href="http://www.google.com/" class="inlineLink">View: Googlee.com</a>

Simple, but so effective! Great for when you want to show a reader something without them disappearing off from your blog!

NOTE: Make sure you check your links once you have added the effect, there are the odd sites out there which won't work in an iFrame, take YouTube.com for example (go on give it a click).....

Scoobler.

Some jQuery books from Amazon.com: