Tuesday, 19 February 2013

Image slide show using JQuery With ASP.Net Example

Click Here to Download JQueryCyclePuginDemo.zip

Now a day image slide show is very popular in websites. Earlier we are using Flash for image slide show. But now a days we are using Javascript for making lite weight image slide show. Using JQuery we can make image slide shows with a many variations in slide show.

We are using JQuery Cycle plugin. This plugin provide many options for slide show. You can download cycle plugin here. Download "jquery.cycle.all.js". You can also check it's Functional documentation and FAQs on this link.

Here is example for this.

In this example we display cover effect and grouping div effect slide show.

ASPX Code : 

<!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></title>
    <style type="text/css">
        #nav
        {
            margin: 20px auto;
        }
        #nav a
        {
            padding: 4px 6px;
            margin: 3px;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration: none;
            background-color: #ddd;
        }
        #nav a.activeSlide
        {
            color: #c00;
        }
        #nav a:focus
        {
            outline: none;
        }
        
        .slideshow
        {
            margin: 20px auto;
            padding: 0;
            clear: left;
        }
        .slide
        {
            margin: 0;
            padding: 0;
        }
        .slideshow, .slide
        {
            height: 232px;
            width: 710px;
        }
        .slideshow img
        {
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #eee;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"> </script>
    <script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
    <script type="text/javascript">


        $(function () {
            $('#main').cycle({

                fx: 'cover',
                speed: 500,
                timeout: 2000

            });
        });

        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'scrollLeft',
                timeout: 0,
                pager: '#nav'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <fieldset>
        <legend>Cover Effect</legend>
        <div id="main" style="width: 200px; height: 300px">
            <img src="Images/bamboo.jpg" style="width: 200px; height: 300px" />
            <img src="Images/ceynote.jpg" style="width: 200px; height: 300px" />
            <img src="Images/cypress.jpg" style="width: 200px; height: 300px" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Grouping div</legend>
        <div style="margin: auto; text-align: center">
            <div id="nav">
            </div>
        </div>
        <div class="slideshow">
            <div class="slide">
                <img src="Images/firefox-512-200x200.png" width="200" height="200" />
                <img src="Images/iguana.jpg" width="200" height="200" />
                <img src="Images/josh-ships.jpg" width="200" height="200" />
            </div>
            <div class="slide">
                <img src="Images/bamboo.jpg" width="200" height="200" />
                <img src="Images/ceynote.jpg" width="200" height="200" />
                <img src="Images/cypress.jpg" width="200" height="200" />
            </div>
            <div class="slide">
                <img src="Images/jungle.jpg" width="200" height="200" />
                <img src="Images/palmtree.jpg" width="200" height="200" />
                <img src="Images/iguana.jpg" width="200" height="200" />
            </div>
        </div>
    </fieldset>
    </form>
</body>
</html>

Output :
JQuery Image Slide Show
(To view original image , click on image)

For other JQuery article "Image Overlay Using JQuery Plugin With ASP.Net Example" visit this link.

 Note : There are many different image slide option available in plugin. In this example we demonstrate only two options. We will demonstrate other options in future articles.



at 12:06
Labels: , , ,

1 comment:

  1. Unknown22 August 2013 at 12:38

    Hi, I have studied Image slide show using JQuery With ASP.Net Example

    Theosoft

    ReplyDelete

Subscribe to: Post Comments (Atom)