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