|
In this article we will explore how to use jQuery dialog and apply animation on it. I have used dialog to show zoomed image.
Figure 1: Zooming image in dialog box
Figure 2: Exploding image on closing
Let's see how we can achieve this:
Step 1: Add below css and javascript in the page. Download entire code from bottom of the page which has all the below js and css or you can download from http://jquery.com/ and http://jqueryui.com/.
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="demos.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="js/jquery.effects.core.js"></script>
<script type="text/javascript" src="js/jquery.effects.blind.js"></script>
<script type="text/javascript" src="js/jquery.effects.explode.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />
Step 2: Add below style in head section of the page.
<style type="text/css">
.imgThNail
{
height: 150px;
width: 150px;
}
</style>
Step 3: Add below javascript in the aspx page. You need to overrid width, and position of the dialog. By defualt width is fixed and postion is also fixed.
< script type="text/javascript">
$.fx.speeds._default = 1000;
$(function() {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: "auto",
title: "Cars"
});
$("img.imgThNail").click(function(e) {
var newImg = '<img src=' + $(this).attr("src") + '></img>';
$('#sourceDiv')
.html($(newImg)
.animate({height: $(this).width() + 300, width: ($(this).width() + 400) }));
$("#dialog").dialog("option", "position", [360, 30]);
$('#dialog').dialog('open');
});
});
</script>
Step 4: Now add below images in one div and another div with id dialog. The dialog div will contain another div with id sourceDiv.
<div>
<asp:Image ID="imgA" class="imgThNail" runat="server" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg" />
<asp:Image ID="imgB" class="imgThNail" runat="server" ImageUrl="images/Hummer-H3_Alpha_2008.jpg" />
<asp:Image ID="imgC" class="imgThNail" runat="server" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg" />
<asp:Image ID="Image1" class="imgThNail" runat="server" ImageUrl="images/Suzuki-Swift.jpg" />
</div>
<div id="dialog">
<div id="sourceDiv">
</div>
</div>
Live Demo
This ends the article of zoom image in the dialog and explode it on close.
|