Image Gallery with enlarge image preview and transition effects using C# and VB.Net in ASP.Net

Hi IamAzhar,

For slow effect use jQuery fadeIn and fadeOut.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function LoadDiv(url) {
        var img = new Image();
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        var imgLoader = document.getElementById("imgLoader");

        imgLoader.style.display = "block";
        img.onload = function () {
            imgFull.src = img.src;
            //imgFull.style.display = "block";
            $(imgFull).fadeIn(1000, 'linear');
            imgLoader.style.display = "none";
        };
        img.src = url;
        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 - 210) / 2 + "px";
        imgDiv.style.top = "20px";
        bcgDiv.style.width = "100%";

        //bcgDiv.style.display = "block";
        $(bcgDiv).fadeIn(1000, 'linear');
        //imgDiv.style.display = "block";
        $(imgDiv).fadeIn(1000, 'linear');
        return false;
    }
    function HideDiv() {
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        if (bcgDiv != null) {
            //bcgDiv.style.display = "none";
            //imgDiv.style.display = "none";
            //imgFull.style.display = "none";
            $(bcgDiv).fadeOut(1000, 'linear');
            $(imgDiv).fadeOut(1000, 'linear');
            $(imgFull).fadeOut(1000, 'linear');
        }
    }
</script>
<style type="text/css">
    body
    {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .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: 230px;
        width: 210px;
        padding: 3px;
        border: solid 1px black;
    }
    * html #divImage
    {
        position: absolute;
    }
</style>
<div align="center">
    <br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="Name" HeaderText="Image Name" />
            <asp:TemplateField HeaderText="Preview Image">
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Path")%>' Width="100px"
                        Height="100px" Style="cursor: pointer" OnClientClick="return LoadDiv(this.src);" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<div id="divBackground" class="modal">
</div>
<div id="divImage" class="info">
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center">
                <img id="imgLoader" alt="" src="Uploads/loader.gif" />
                <img id="imgFull" runat="server" alt="" src="" style="display: none; height: 200px;
                    width: 200px" />
            </td>
        </tr>
        <tr>
            <td align="center" valign="bottom">
                <input id="btnClose" type="button" value="close" onclick="HideDiv()" />
            </td>
        </tr>
    </table>
</div>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        SqlConnection con = new SqlConnection(strConnString);
        SqlCommand cmd = new SqlCommand("SELECT TOP 2 * FROM tblFilesPath ORDER BY ID");
        cmd.Connection = con;
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        sda.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dt As DataTable = New DataTable()
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim cmd As SqlCommand = New SqlCommand("SELECT TOP 2 * FROM tblFilesPath ORDER BY ID")
        cmd.Connection = con
        Dim sda As SqlDataAdapter = New SqlDataAdapter(cmd)
        sda.Fill(dt)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot