Thursday, 30 August 2012

How to Expand & Rotate Image Using JQUERY



In this article, we will create an expanding image by using slider and also rotate that image by JQUERY.



So, Let's get started:


The HTML

<div id="container">
<div id="slider">
</div>
<br />
<div id="images">
<img id="img" alt="" class="img_main" src="Images/1.jpg" />
<img id="img1" alt="" class="img" src="Images/2.jpg" />
<img id="img7" alt="" class="img" src="Images/3.jpg" />
<img id="img3" alt="" class="img" src="Images/4.jpg" />
<img id="img4" alt="" class="img" src="Images/5.jpg" />
<img id="img5" alt="" class="img" src="Images/6.jpg" />
<img id="img2" alt="" class="img" src="Images/7.jpeg" />
</div>
</div>

Now, Let's look at the style

The CSS

<style type="text/css">
#container
{
padding: 50px;
margin-top: 20px;
}
#images
{
padding: 40px;
}
#images img
{
margin-left: -100px;
background: #e9e9e9;
padding: 10px;
cursor: pointer;
}
#images img:hover
{
background: #333;
}
#slider
{
width: 350px;
}
</style>

The JavaScript

<link href="js/theme/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/Jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script src="js/Base.js" type="text/javascript"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>
<script type="text/javascript">
$(function () {
$("#slider").slider({
value: -100,
min: -100,
max: 0,
step: 1,
slide: function (event, ui) {
$(".img").css("margin-left", ui.value + "px");
}
});
$("img").rotate3Di(45);
$('img').click(function () { $(this).rotate3Di('toggle', 1000); });
});
</script>


and That's it. Hope, you enjoyed this article and like it.

Download Files:

JqueryTest

3 comments: