How to Create Image Gallery in Asp.net using Datalist Data Control

Introduction: In this article I will explain how we can Create Image gallery in Asp.net using Datalist Data Control.
 Image Gallery

Description:

Here I use the Datalist Data control to create Image galley, user click on Image, image will open in popup and able to see images via click on Next and Previous button.
Take a new project/Website. Add webform to project and drag and drop the Datalist Control from Toolbox. Here I bind Datalist control using SqlDataSource. Put the below style and script in between Head Tag:
<style type = "text/css">
     .BackGround
     {
        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%;
     }
     #showImage
     {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        background-color:White;
        height: 550px;
        width: 630px;
        padding: 3px;
        border: solid 1px black;       
     }
    .galleryTable
    {
        border:double 1px #D9D9D9;
        width:200px;
        text-align:left;      
    }
    .dlgallery
    {
        margin-left:200px;
    }
</style>
<script type="text/javascript" >
        function LoadDiv(url, lnk) {
            var img = new Image();
            var bcgDiv = document.getElementById("Background");
            var imgDiv = document.getElementById("showImage");
            var imgFull = document.getElementById("imgOpen");
            var imgLoader = document.getElementById("imgLoader");
            var dl = document.getElementById("<%=dlimage.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;
        }

        function HideDiv() {
            var bcgDiv = document.getElementById("Background");
            var imgDiv = document.getElementById("showImage");
            var imgFull = document.getElementById("imgOpen");
            bcgDiv.style.display = "none";
            imgDiv.style.display = "none";
            imgFull.style.display = "none";
        }
        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);
            }
        }
        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";
            }
        }

        function doPaging(lnk) {
            var dl = document.getElementById("<%=dlimage.ClientID%>");
            var imgs = dl.getElementsByTagName("img");
            var imgLoader = document.getElementById("imgLoader");
            var imgFull = document.getElementById("imgOpen");

            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>

After that design the .aspx page as shown below:

<div id="Background" class="BackGround">
</div>
 <asp:DataList ID="dlimage" runat="server"  RepeatColumns="3" CssClass="dlgallery"
             DataSourceID="SqlDataSource1" >               
                <ItemTemplate>
                  <table  width="100%" class="galleryTable">                   
                    <tr>                  
                     <td style="padding: 10px 10px 10px 10px; ">                       
                        <asp:Image ID="img"  runat="server"     ImageUrl='<%# Eval("IMAGE_PATH") %>'  Height="150px" Width="200px"   onclick = "LoadDiv(this.src, this)" style ="cursor:pointer;border-radius :5px 5px 5px 5px;"/>
                        </td>                                                           
                                            </tr>
                    <tr>
                      <td style=" font-size:16px; font-weight:bold; text-align:center;" >
                        <asp:Label ID="lktitle"   Text='<%# DataBinder.Eval (Container.DataItem, "IMAGE_NAME") %>' runat="server"  />
                        </td>
                      </tr>                   
                    </table>                 
                  </ItemTemplate>               
                </asp:DataList>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:TestBlogConnectionString %>"
            SelectCommand="SELECT * FROM [IMAGE_PATH]"></asp:SqlDataSource>
                <div id="showImage" >
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center" colspan = "3" style ="height:400px;">
                <img id="imgLoader" runat="server" alt=""
                 src="images/loader.gif" />
                <img id="imgOpen" 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="div1" class="BackGround">
</div>


Now run the project and check the result.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget