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

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>