Share Blog

Thursday, January 29, 2015

How to Use Image In Datalist with Slidshow Asp.net

------------------------------------------Create Table For Image--------------------------------

CREATE TABLE news_info(
      [imageid] [int] PRIMARY KEY IDENTITY(1,1) NOT NULL,
      [Title] [varchar](100) NULL,
      [name] [varchar](100) NULL,
      [discription] [varchar](max) NULL,
      [ImagePath] [varchar](max) NULL,

)

-----------------------image_list.aspx code-------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="image_list.aspx.cs" Inherits="image_list" %>

<!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>
    <script type="text/javascript">
        function LoadDiv(url, lnk) {
            var img = new Image();
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            var imgLoader = document.getElementById("imgLoader");
            var dl = document.getElementById("<%=DataList1.ClientID%>");
            var imgs = dl.getElementsByTagName("img");


            CurrentPage = GetImageIndex(lnk.parentNode) + 1;
            imgLoader.style.display = "block";
            img.onload = function () {
                imgFull.src = img.src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            };
            img.src = url;
            Prepare_Pager(imgs.length);
            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
                bcgDiv.style.height = document.body.clientHeight + "px";
            }
            else {
                bcgDiv.style.height = document.body.scrollHeight + "px";
            }

            imgDiv.style.left = (width - 650) / 2 + "px";
            imgDiv.style.top = "20px";
            bcgDiv.style.width = "100%";

            bcgDiv.style.display = "block";
            imgDiv.style.display = "block";
            return false;
        }
    </script>
    <script type="text/javascript">
        function HideDiv() {
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            bcgDiv.style.display = "none";
            imgDiv.style.display = "none";
            imgFull.style.display = "none";
        }
    </script>
    <script type="text/javascript">
        var CurrentPage = 1;
        function GetImageIndex(obj) {
            while (obj.parentNode.tagName != "TD")
                obj = obj.parentNode;
            var td = obj.parentNode;
            var tr = td.parentNode;
            if (td.rowIndex % 2 == 0) {
                return td.cellIndex + tr.rowIndex;
            }
            else {
                return td.cellIndex + (tr.rowIndex * 2);
            }
        }
    </script>
    <script type="text/javascript">
        function Prepare_Pager(imgCount) {
            var Previous = document.getElementById("Previous");
            var Next = document.getElementById("Next");
            var lblPrevious = document.getElementById("lblPrevious");
            var lblNext = document.getElementById("lblNext");
            if (CurrentPage < imgCount) {
                lblNext.style.display = "none";
                Next.style.display = "block";
            }
            else {
                lblNext.style.display = "block";
                Next.style.display = "none";
            }
            if (CurrentPage > 1) {
                Previous.style.display = "block";
                lblPrevious.style.display = "none";
            }
            else {
                Previous.style.display = "none";
                lblPrevious.style.display = "block";
            }
        }
    </script>
    <script type="text/javascript">
        function doPaging(lnk) {
            var dl = document.getElementById("<%=DataList1.ClientID%>");
            var imgs = dl.getElementsByTagName("img");
            var imgLoader = document.getElementById("imgLoader");
            var imgFull = document.getElementById("imgFull");

            var img = new Image();
            if (lnk.id == "Next") {
                if (CurrentPage < imgs.length) {
                    CurrentPage++;
                    imgLoader.style.display = "block";
                    imgFull.style.display = "none";
                    img.onload = function () {
                        imgFull.src = imgs[CurrentPage - 1].src;
                        imgFull.style.display = "block";
                        imgLoader.style.display = "none";
                    };
                }
            }
            else {
                if (CurrentPage > 1) {
                    CurrentPage--;
                    imgLoader.style.display = "block";
                    imgLoader.style.display = "none";
                    img.onload = function () {
                        imgFull.src = imgs[CurrentPage - 1].src;
                        imgFull.style.display = "block";
                        imgLoader.style.display = "none";
                    };
                }
            }
            Prepare_Pager(imgs.length);
            img.src = imgs[CurrentPage - 1].src;
        }
    </script>
    <style type = "text/css">
     .modal
     {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color:black;
        z-index:100;
        opacity: 0.8;
        filter: alpha(opacity=60);
        -moz-opacity:0.8;
        min-height: 100%;
     }
     #divImage
     {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        background-color:White;
        height: 550px;
        width: 610px;
        padding: 3px;
        border: solid 1px black;
     }
    .dlTable
    {
        border:double 1px #D9D9D9;
        width:200px;
        text-align:left;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DataList ID="DataList1" runat="server" RepeatColumns = "4"  RepeatLayout = "Table"  Width = "500px">
    <ItemTemplate>
        <br />
        <table cellpadding = "5px" cellspacing = "0" class="dlTable">
        <tr>
            <td>
                <asp:Image ID="Image1" runat="server" ImageUrl = '<%# Eval("ImagePath")%>'
                Width = "200px" Height = "200px" onclick = "LoadDiv(this.src, this)" style ="cursor:pointer" />
            </td>
        </tr>
        </table>
        <br />
    </ItemTemplate>
</asp:DataList>
    </div>
    <div id="divImage" >
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center" colspan = "3" style ="height:500px;">
                <img id="imgLoader" runat="server" alt=""
                 src="images/loader.gif" />
                <img id="imgFull" alt="" src=""
                 style="display: none;
                height: 500px;width: 600px" />
            </td>
        </tr>
        <tr>
            <td align = "left" style="padding:10px;width:200px">
              <a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none">Previous</a>
                <span id = "lblPrevious">Previous</span>
            </td>
             <td align="center" valign="middle" style ="width:200px">
                <input id="btnClose" type="button" value="close"
                 onclick="HideDiv()"/>
            </td>
            <td align = "right" style ="padding:10px;width:200px">
                <a id = "Next" href = "javascript:" onclick = "doPaging(this)">Next</a>
                <span id = "lblNext" style ="display:none">Next</span>
            </td>
        </tr>
      
    </table>
</div><div id="divBackground" class="modal">
</div>
    </form>
</body>
</html>

 -----------------------image_list.aspx.cs code---------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class image_list : System.Web.UI.Page
{
    //SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
    SqlConnection con = new SqlConnection("Data Source=UNIVITECH-PC2\\SQLEXPRESS;Initial Catalog=db;Integrated Security=True");
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
        }
    }
    protected void BindData()
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from news_info ", con);
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(ds);
        DataList1.DataSource = ds;
        DataList1.DataBind();
        con.Close();
    }
}


---------------RESULT--------------------------



-----------------------------------Click on Image--------------------------------------------



No comments:

Post a Comment