Sliding Image using JQuery


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

Also I have attached all these plug-ins as attachement.

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.
Sliding Image using JQuery

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...


Article by Asheej T K
Thanks and Regards Asheej T K Dotnet Galaxy

Follow Asheej T K or read 33 articles authored by Asheej T K

Comments

Author: SivaSaiKrishna19 Jan 2012 Member Level: Silver   Points : 0

Hi Asheej T K

Its working Good .

Thank you so much for sharing this .

Author: Asheej T K19 Jan 2012 Member Level: Gold   Points : 0

you are welcome SivaSaiKrishna.

Author: SonyShiva20 Jan 2012 Member Level: Gold   Points : 1

hI ASHEEJ,


Thanks for sharing, i tried this previously bt not succeed.
And now also.
Images are displaying one by one.
As in your screenshot i want.
I tried with same code u provided here, but not succeeded..
What will be the problem...
Otherwise share the application..

Author: Asheej T K20 Jan 2012 Member Level: Gold   Points : 0

Which browser you are using? Make sure that JavaScript is enabled. You don't need anything additional apart from the code I have given.

Author: SonyShiva22 Jan 2012 Member Level: Gold   Points : 0

Hi ashjeej,

Thanks,
ya it's with javascript thing only.
:-)

Author: Asheej T K24 Jan 2012 Member Level: Gold   Points : 0

@SonyMadhu: I hope it is working now in your system..

Author: SIVA RAMAMOORTHY14 Feb 2012 Member Level: Gold   Points : 0

Hi Asheej,

Thank you very much..
Its nice sharing..

I tried alot to do slide show.
Finally i got the solution with simple presentation..

But i got small problem to my page..

I placed slideshow presentaion downside of my menu
Now when i select menu item sub items are not visible for me, which are hiding by slide show.

Can you help me for this?

Author: Asheej T K14 Feb 2012 Member Level: Gold   Points : 0

Use div tag around your menu. Otherwise menu will go behind the controls.

Author: Raj.Trivedi13 Jun 2012 Member Level: Gold   Points : 0

How can i get the images from the back end and get top 10 recent images

Guest Author: siva10 Feb 2013

Hi Ajsheej,
It's working nice. I Thankful to you

Guest Author: jaydeep17 Feb 2013

i can run that cod but that time page autometicaly redirect to the google.com .

and google.com page can be open what is the problem

Guest Author: 18 Feb 2013

its working but i have another query when i click that particular image so i am redirect to that particualr image which hasbeen click....................................

Guest Author: Anonymous20 Mar 2013

Good one ..
how can we make it for auto sliding



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: