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 () {
$(".fancybox").fancybox();
});
There are more cases in how to use fancybox that you can check at FancyBox.
Effect that we managed to create looks like this:
So, long, folks!
0 comments:
Post a Comment