…Well not literally but hey a little bit of hyperbole never hurts right šŸ˜€

Well on to the topic, I was making a form which requires me to have a GridView (it sure is a great boon for dotNet developers) which has a few columns and one of them is a TemplateColumn containing an Image control which is bound to a column from a database having the image name.

Now if you have worked with GridView anytime, then you would remember, it would look ugly if the image size is kept big and it would just not fit the purpose if kept small. So we need a mechanism which would allow us to zoom the image some way and thats exactly where FancyBox comes in picture.

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library.

That was straight from the horse’s mouth. If you still havent got wat is it all about then click on the image below..

Isnt she a cutie?

Isnt she a cutie?

Now wasnt that a nice effect to have on a image? Well you can have it on your webpages too and that to Very Easily. Ya and I will prove it to you šŸ™‚

Download the latest version of FancyBox from here. It includes the latest version of JQuery scripts so you wont need to download them.

Lets do a step-by-step tutorial shall we?

I wont be showing on how to do it with normal html pages. Thats very simple and can be learn from here.

If you are not familiar with jQuery, please, read at least this tutorial for beginners

Now for using FancyBox in a GridView in an ASP.NET form, lets start by creating a simple form.

The output might be something like this…

< %@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebRnD1._Default" %>


    Untitled Page


    

The codes give here are just examples, and your codes can vary. We have created an asp.net Form stating Now go and add the below code in between the form tags.


        
            
                
                    
                
            
            
                
                    
                
            
        
    

We have just added a GridView control to our form having two columns, both of them acting as TemplateFields. The first displays a hyperlink wrapping around an image and second column displays a label for the image.
Our concern is the first column which contains…

Though looks so simple, this is our key for the FancyBox. We are simply creating a hyperlink which will be searched by the FancyBox script and on clicking the image it will popup with the image linked using the href attribute. Aint that so simple?? Yeah, the form is ready, all we need to do is add the script. Lets do that…

Add a script tag in the head element like this..

......
    Untitled Page
    
    
    
    
......

In the above snippet, we are adding a reference to two script files, one is the jquery script which allows us to fantastically work with the elements of our page and the second is the fancybox script which will work its magic on the hyper-images. We are also adding a reference to a css file which manages how the popup is displayed i.e. at the centre of the screen.
Then comes our main code which makes it all work. Lets debug it step by step.

$(document).ready(function() {......});

The above line is instructing to get the document object and when its ready call and anonymous function which will…

$("a#oneimg").fancybox({ ...... });

Get all the anchor tags with id as single and apply the fancybox function on them with the specified parameters. To know what these parameters do and what can be used refer here.

Thats it, we are done. Put it all together and run and you will get a effect like the one which you saw above. (Btw, I hope Miley Cyrus likes that dance :D)

Another problem which I have faced is when you are databinding a GridView with lots of rows containing images. In that case the fancybox works on the first image but not on the rest. The reason is because when you query for an anchor tag using ID you will get only one elements. Thats what ID’s are for right. To keep the elements unique. But what if you want to apply the effect on all the images? Simply apply a dummy class attribute and use the class to get elements in jquery. Here is how…

Look closely, and the only thing which I have changed here that instead of id, now I am using class attribute and also used the part of databinding the value.

After that you need to modify your jQuery a bit by asking it to get elements using the class and not id like this…

$("a.oneimg").fancybox({ ...... });

Yeah, that does the trick!! If you are looking for to implement this in your WordPress blog then you can get this plugin : FancyBox for WordPress

Now let the party begin!! Who let the dogs out, woof woof woof šŸ˜€