Tuesday, December 28, 2010

create slider using javascript

code for .aspx page


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>..::Slider Image::..</title>
    <link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/effects.core.js"></script>
<script src="js/effects.slide.js"></script>

<script type="text/javascript" src="supersized.3.0.js"></script>


<style type="text/css">
#controls{ padding:0 10px; }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersized"></div>

<!--Control Bar-->
<div id="controls-wrapper">
<div id="controls">

<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>

<!--Slide captions displayed here-->
<div id="slidecaption"></div>

<div id="prevthumb"></div>
<div id="nextthumb"></div>

<!--Navigation-->
<div id="navigation">
<img id="prevslide" src="images/back_dull.png"/><img id="pauseplay" src="images/pause_dull.png"/><img id="nextslide" src="images/forward_dull.png"/>
</div>

<a href="#" class="stamp"><img src="images/supersized-logo.png"/></a>

</div>
</div>
    </div>
    </form>
</body>
</html>

--------------------------------------------------------------

code for .aspx.cs file
----------------------------------------------------------------


 DataAccess data = new DataAccess();
    protected void Page_Load(object sender, EventArgs e)
    {
        string path1 = string.Empty;
        string name = string.Empty;
        if (Page.IsPostBack == false)
        {
            string scr = @"<script>
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 1,
thumbnail_navigation: 0,
transition: 3, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 1,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000,";
               scr += @"slides : [";
            string sp = "select * from image";
            DataTable dt = data.GetDataTable(sp);
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                path1 = dt.Rows[i]["Image_Path"].ToString();
                name = dt.Rows[i]["Image_Name"].ToString();
              
                    scr +=@"{image : '" + path1;
                    scr += @"', title : '" + name;
                    scr += @"', url : 'http://www.google.com'},";
                }
            }

scr +=@"]
};
       $('#supersized').supersized();
   });
</script>;";
                    ClientScript.RegisterClientScriptBlock(this.GetType(), "", scr);
            
        }

    }


No comments:

Post a Comment