Image Slideshow Using jQuery

Sapna
May 15, 2012

122.1k
0
7
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction: In this article we will explore how to slide an images using jQuery and how it is possible to slide the images in ASP.NET using jQuery. We often see this inside websites that at the corner, images slide one by one; it may be advertisement images or the images you want to display for commercially or for look and feel. By using this type of functionality we can give an awesome effect to our website that will produce a great effect on the user of the website. You often seen that these are basically built on flash but by using jQuery in ASP.NET we can build this type of functionality. For doing this we have to use a CSS style sheet that will be necessary to set the position, z-index, border etc. Now it's time to see how we will make it :

Step 1: Firstly we have to create a web Application.

Go to Visual Studio 2010
New--> And select the web Application
Give it's a name whatever you want
Click OK

Step 2: Secondly you have to add a new page to the website

Go to the Solution Explorer
Right Click on the Project name
Select add new item
Add new web page and give it a name
Click OK

Next--> Click

Step 3: In this step you should have to add some images to the project let see how it will looks like. These are the images basically i used but you can use your own images whatever you want to do:

Step 4: In this code you will see that we have to add some images inside the default2.aspx page now let see that how we will add it. First of all we have to take a div inside it we will take the images whatever the number you want let see the body code of the default2.aspx page:

Body Code:

<body style="font-family: Arial, Sans-serif, sans;">
<h1 style="border: 5px groove #C0C0C0; font-family: 'Comic Sans MS'; font-size: xx-large; color: #00FF00; background-color: #2a2a2a;">Simple jQuery Slideshow</h1>
<div id="s_show">
    <img src="images/ch.jpeg" alt="img" />
    <img src="images/ch1.jpeg" alt="img1" />
    <img src="images/ch2.jpeg" alt="img2" />
    <img src="images/ch3.jpeg" alt="imge3" />
    <img src="images/ch4.jpeg" alt="img4" />
    <img src="images/ch5.jpeg" alt="img5" />
    <img src="images/bvnvcm.jpeg" alt="img6" />
    <img src="images/gfndfnj.jpeg" alt="img7" class="active" />
    <img src="images/hgjf.jpeg" alt="img4" />
</div>
<h1 style="border: 5px groove #800000; font-family: 'Comic Sans MS'; font-size: xx-large; color: #CCFF33; background-color: #2a2a2a; position: absolute;">Let see the slide show will display images one by one</h1>
</body>

Step 5: In this step we will see that how to add style sheet code, Whenever we will write the style sheet code you have to care that it will be write inside the <style></style> code and you have to plcaced it inside the head section:

Style Code:

<style type="text/css">
#s_show {
    position:relative;
    height:350px;
    background-color:#2a2a2a;
    border:5px groove Fuchsia;
}
#s_show IMG {
    position:absolute;
    top:40px;
    left:50px;
    border-width:5px;
    border-color:Fuchsia;
    border-style:groove;
    z-index:8;
    opacity:0.0;
}
#s_show IMG.active {
    z-index:10;
    opacity:1.0;
}
#s_show IMG.last-active {
    z-index:9;
}
</style>

Step 6: In this step we have to write the script reference to the aspx page let see from where you have to write the script code:

Step 7: Let see the script code which you have to add inside the<script></script> and will be paced either head section or body section as you want:

Step 8: In this step we have to write the jQuery code which is given below:

Step 9: In this step we will see the complete code for the Default2.aswpx page let see the code given below:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Slideshow</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    function slideShow() {
        var $active = $('#s_show IMG.active');
        if ($active.length == 0) $active = $('#s_show IMG:last');
        var $next = $active.next().length ? $active.next()
        : $('#s_show IMG:first');
        $active.addClass('last-active');
        $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $active.removeClass('active last-active');
        });
    }

    $(function () {
        setInterval("slideShow()", 3000);
    });
</script>
<style type="text/css">
#s_show {
    position:relative;
    height:350px;
    background-color:#2a2a2a;
    border:5px groove Fuchsia;
}
#s_show IMG {
    position:absolute;
    top:40px;
    left:50px;
    border-width:5px;
    border-color:Fuchsia;
    border-style:groove;
    z-index:8;
    opacity:0.0;
}
#s_show IMG.active {
    z-index:10;
    opacity:1.0;
}

#s_show IMG.last-active {
    z-index:9;
}
</style>
</head>
<body style="font-family: Arial, Sans-serif, sans;">
<h1 style="border: 5px groove #C0C0C0; font-family: 'Comic Sans MS'; font-size: xx-large; color: #00FF00; background-color: #2a2a2a;">Simple jQuery Slideshow</h1>
<div id="s_show">
    <img src="images/ch.jpeg" alt="img" />
    <img src="images/ch1.jpeg" alt="img1" />
    <img src="images/ch2.jpeg" alt="img2" />
    <img src="images/ch3.jpeg" alt="imge3" />
    <img src="images/ch4.jpeg" alt="img4" />
    <img src="images/ch5.jpeg" alt="img5" />
    <img src="images/bvnvcm.jpeg" alt="img6" />
    <img src="images/gfndfnj.jpeg" alt="img7" class="active" />
    <img src="images/hgjf.jpeg" alt="img4" />
</div>
<h1 style="border: 5px groove #800000; font-family: 'Comic Sans MS'; font-size: xx-large; color: #CCFF33; background-color: #2a2a2a; position: absolute;">Let see the slide show will display images one by one</h1>
</body>
</html>