Here I am going to explain you how you can make a sliding image in your web application using jQuery. There are many ways to implement this feature in your web application but Using jQuery it will be very easy and you don't need to use any timer control for sliding it automatically.
Sliding Image using JQuery.
Let's start with step by step.
First we will download the required jQuery Library for this purpose.
Below are the library names to be downloaded for this purpose and the respective URL for that,
1. jquery-1.6.4.min.js
2. jquery.easing.1.3.js
3. jquery.cycle.all.js
Now we will start the coding
First Open a simple web application using your visual studio.
Go to the webapplication root folder and create two folder named "Scripts" and "images" to save jQyery Library which we downloaded and to save the image we will be using in the application.
Copy all the 3 jQuery library in your "Scripts" folder and all the images in your "images" Folder.
Once this is done we will open our web application and copy below lines in your head section of the .aspx page.
Sliding Image using JQuery.
Let's start with step by step.
First we will download the required jQuery Library for this purpose.
Below are the library names to be downloaded for this purpose and the respective URL for that,
1. jquery-1.6.4.min.js
2. jquery.easing.1.3.js
3. jquery.cycle.all.js
Now we will start the coding
First Open a simple web application using your visual studio.
Go to the webapplication root folder and create two folder named "Scripts" and "images" to save jQyery Library which we downloaded and to save the image we will be using in the application.
Copy all the 3 jQuery library in your "Scripts" folder and all the images in your "images" Folder.
Once this is done we will open our web application and copy below lines in your head section of the .aspx page.
<head runat="server"><%--needs to download "jquery-1.6.4.min.js","jquery.easing.1.3.js" and jquery.cycle.all.js files from the net. Just search in google for this file directly --%>
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
<title>Sample jQuery Sliding Image Application</title>
<script type="text/javascript">jQuery(document).ready(function ()
{if (jQuery('#SlideImages').length > 0)
{ jQuery('#SlideImages').cycle( {fx: 'curtainX', speed: 500, timeout: 5000, randomizeEffects: true, easing: 'easeInOutBounce',
next: '.NextSlide',prev: '.PrevSlide',pager: '#SlideStyleNav',cleartypeNoBg: true
});
}
});
</script>
<%--Prev.png and Next.png are the two small buttons to navigate next and prev on click ImageCount.png is the image count we display at the bottom of the page.--%> <style type="text/css">#SlideStyle{position:relative;width:400px;}#SlideStyle .PrevSlide, #SlideStyle .NextSlide{display:block;position:absolute;width:40px;height:40px;top:150px;z-index:9999;text-decoration:none;}#SlideStyle .PrevSlide{left:0;background:transparent url(images/Prev.png) no-repeat top left;}#SlideStyle .NextSlide{right:0;background:transparent url(images/Next.png) no-repeat top left;}#SlideStyleNav {position:absolute; bottom:0; z-index:9999;}#SlideStyleNav a{background:transparent url(images/ImageCount.png) no-repeat 0 0 ; float:left; height:15px; overflow:hidden; text-decoration:none; text-indent:-1234px; width:16px;}#SlideStyleNav a.activeSlide {background-position:-32px 0;}#SlideImages{overflow: hidden; position: relative;}</style>
</head>
Now in your body tag add below code.
<body>
<form id="form1" runat="server">
<div id="SlideStyle"> <div id="SlideImages"><%--Needs to add images in IMAGE folder, in this examle I have added 6 Images--%>
<%--Image size can be changed depends on the size of image you are using, my code shrinks the image according to the size you are mentioning --%><img src="images/1.jpg" alt="Image 1" width="400" height="300" />
<img src="images/2.jpg" alt="Image 2" width="400" height="300" />
<img src="images/3.jpg" alt="Image 3" width="400" height="300" />
<img src="images/4.jpg" alt="Image 4" width="400" height="300" />
<img src="images/5.jpg" alt="Image 5" width="400" height="300" />
<img src="images/6.jpg" alt="Image 6" width="400" height="300" />
</div>
<a class="PrevSlide" href="#"> </a>
<a class="NextSlide" href="#"> </a>
<div id="SlideStyleNav"> </div></div>
</form>
</body>
Below is the sample image you will get after creating this application.
In this code you may change the image name based on the images you are using. You don't need to worry about the size of the images as I am adjusting the size of the images to fit it into the space.
Below are the some of the fx: options you can try:
1. shuffle
2. Zoom
3. fade
4. turnDown
5. curtainX
Below are the some of the easing: options you can try:
1. easeOutBounce
2. easeInBounce
3. easeInOutBack
4. easeOutBack
5. easeInOutQuint
you can find many more options if you search over the net I have given you just 5 options in each category there are lot many...
No comments:
Post a Comment