How to Create Image Gallery in Asp.net using Datalist Data Control - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon