Nezir Zahirović

FancyBox and Visual Studio 2012


In this post I will quickly show you " How to integrate those fancy modal image preview ".
Magic library for this functionality is mighty FancyBox the "tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize."

Let's see how things are working....

1- We create web site project inside our VS 2012.
2- Include into project jQuery in this sample I use latest version 1.7.2.
3- Also we need to include FancyBox. (It would be very strange to not include it in this sample :D ) 

So, our project look's like:

Here you can see our included files inside project, also you can see our test page html and jQuery code.
Most important thing here is that you use class="fancybox" as image control css class. 

jQuery code is very very simple as you can see here:

       $(document).ready(function () {

There are more cases in how to use fancybox that you can check at FancyBox.

Effect that we managed to create looks like this:
 When we click on image we get this.

So, long, folks!

    Blogger Comment
    Facebook Comment


Post a Comment