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.
