Showing posts with label DataList View controls. Show all posts
Showing posts with label DataList View controls. Show all posts

Saturday, August 18, 2018

Dynamic Animated Event Gallery with Light Box Effect | Sradha WebCreations

Dynamic Animated Event Gallery with Light Box Effect

After clicking on the picture of the data list view the picture will be displayed as bellow……………..


LightBox.aspx(for visitors)

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

<!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 id="Head1" runat="server">
<title>Display Images Slideshow in asp.net using JQuery</title>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>



    <style type="text/css">
        .style1
        {
            font-family: Algerian;
            text-decoration: underline;
            font-size: xx-large;
            text-align: center;
            color: #FF3300;
        }
        .style2
        {
            background-color: #0099FF;
        }
    </style>



    </head>
<body bgcolor="#0099ff">
<form id="form1" runat="server">
<div>
   
        </div>

<div>
<table align="center">
<tr>
<td height="100" class="style1"><strong><span class="style2">Picture Gallery</span></strong></td>
</tr>
<tr>
<td>
    &nbsp;</td>
</tr>
<tr>
<td bgcolor="#0099FF">
<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5"
        Height="235px" Width="400px">
<ItemTemplate>
<a id="imageLink" href='<%# Eval("ImageName","~/SlideImages/{0}") %>' title='<%#Eval("Description") %>' rel="lightbox[Brussels]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName", "~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
</a>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</td>
</tr>
</table>
<br />
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:myDbConnectionString1 %>"
    SelectCommand="SELECT * FROM [SlideShowTable]">
</asp:SqlDataSource>
</form>
</body>
</html>

LightBox.aspx(for visitors)

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class LightBox : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myDbConnectionString1"].ToString());

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDataList();
        }
    }
    protected void BindDataList()
    {
        con.Open();
        //Query to get ImagesName and Description from database
        SqlCommand command = new SqlCommand("SELECT ImageName,Description from SlideShowTable", con);
        SqlDataAdapter da = new SqlDataAdapter(command);
        DataTable dt = new DataTable();
        da.Fill(dt);
        dlImages.DataSource = dt;
        dlImages.DataBind();
        //GridView1.DataSource = dt;
      
        con.Close();
    }
  
}