Image Gallery with LightBox effect using jQuery LightBox plugin in ASP.Net

Last Reply one year ago By kalpesh

Posted one year ago

I have  a  gallery which have tabke structures like  following

 I want to  show one image in a gridview as a default image.On  Click of that  image. Photos of the related  event should   shown in css pretty photogallery.I don't want  to redirect it to other page.

 Table Structure

CREATE TABLE [dbo].[photogallery](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[EventName_English] [nvarchar](500) NULL,
	[EventName_Hindi] [nvarchar](500) NULL,
	[EventDescription_English] [nvarchar](500) NULL,
	[EventDescription_Hindi] [nvarchar](500) NULL,
	[AddedDate] [datetime] NULL,
	[CreatedBy] [int] NULL,
	[Modifiedby] [int] NULL,
	[ModifiedDate] [datetime] NULL,
	[isdeleted] [int] NULL,
	[defaultImg] [nvarchar](500) NULL,
PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

 

CREATE TABLE [dbo].[images](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[imagename] [nvarchar](500) NULL,
	[Eventid] [int] NULL,
	[AddedDate] [datetime] NULL,
	[CreatedBy] [int] NULL,
	[Modifiedby] [int] NULL,
	[ModifiedDate] [datetime] NULL,
	[isdeleted] [int] NULL,
PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

ALTER TABLE [dbo].[images]  WITH CHECK ADD  CONSTRAINT [FK_images_photogallery] FOREIGN KEY([Eventid])
REFERENCES [dbo].[photogallery] ([id])
GO

ALTER TABLE [dbo].[images] CHECK CONSTRAINT [FK_images_photogallery]
GO

 

 <asp:GridView ID="gdvuploadimg1" CssClass="table-condensed" runat="server" Style="background-color: white" Width="100%" AllowPaging="true" PageSize="25" AutoGenerateColumns="false" OnPageIndexChanging="gdvuploadimg1_PageIndexChanging">
                        <Columns>
                            <asp:TemplateField HeaderText="">
                                <ItemTemplate>
                                    <%#Container.DataItemIndex+1 %>
                                </ItemTemplate>
                            </asp:TemplateField>
                           
                           

                            <asp:TemplateField HeaderText="Id" Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="lblid" runat="server" Text='<%#Eval("id")%>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>

                            <asp:TemplateField HeaderText="EventDescription_English">
                                <ItemTemplate>
                                   <%-- <asp:HyperLink ID="lbleventdeseng" runat="server" Text='<%#Eval("Descrit")%>' NavigateUrl='<%#Eval("id","view_photos.aspx?photoid={0}")%>' ></asp:HyperLink>--%>
                                     <asp:HyperLink ID="lbleventdeseng" runat="server" Text='<%#Eval("Descrit")%>' NavigateUrl='<%#Eval("id","view_photos.aspx?photoid={0}")%>' ></asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateField>

                            <asp:TemplateField HeaderText="Photo">
                                <ItemTemplate>
                                    <asp:Image ID="lbldefaulimg" runat="server" Height="50" Width="50" ImageUrl='<%#Eval("defaultImg","Pictures/{0}")%>'></asp:Image>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="View More">
                                <ItemTemplate>
                                    <asp:Button ID="lknviewmore" Text="View More" runat="server" NavigateUrl='<%#Eval("id","view_photos.aspx?photoid={0}")%>' OnClick="lknviewmore_Click"  ></asp:Button>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
Posted one year ago Modified on one year ago

I have created one sample where i used similar Database structure to work the similar functionality as you explained.

I referred this Image Gallery with LightBox effect using jQuery LightBox plugin in ASP.Net link to make the sample you can refer this sample for your reference.

In Repeater design I have sets rel attribute value. For Parent Repeater I set its by prettyPhoto[{0}] where I sets the Id value to the first index using string.Format similarly I used same way in child repeater where i set rel attribute value prettyPhoto[{0}] where I sets the EventId value to the first index where EventId is its parent table EventId which is it referring so it will work for LightBox functionality to move image as per its rel attribute value.

SQL

CREATE TABLE [photogallery]
(
	[id] [int] 
	,[EventName] [nvarchar](500) NULL
	,[defaultImg] [nvarchar](500) NULL,
PRIMARY KEY CLUSTERED 
([id] ASC)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO 

INSERT INTO [photogallery]([EventName],[defaultImg])
SELECT 1,'Event 1','image1.jpg'
UNION ALL
SELECT 2,'Event 2','image4.jpg'
GO

CREATE TABLE [gallaryimages]
(
	[id] [int] 
	,[imagename] [nvarchar](500) NULL
	,[Eventid] [int] NULL,
PRIMARY KEY CLUSTERED 
([id] ASC)
WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[gallaryimages]  WITH CHECK ADD  CONSTRAINT [FK_images_photogallery] FOREIGN KEY([Eventid])
REFERENCES [dbo].[photogallery] ([id])
GO
ALTER TABLE [dbo].[gallaryimages] CHECK CONSTRAINT [FK_images_photogallery]
GO

SELECT * FROM [gallaryimages]
INSERT INTO [gallaryimages](id,imagename,Eventid)
SELECT 1,'image2.jpg',1
UNION ALL
SELECT 2,'image3.jpg',1
UNION ALL
SELECT 3,'image5.jpg',2
UNION ALL
SELECT 4,'image6.jpg',2
GO

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>
    <style type="text/css">
        .gallery
        {
            background-color: #666;
            padding: 10px;
            width: 200px;
            margin-bottom: 10px;
        }
        .gallery div
        {
            list-style: none;
        }
        .gallery div div
        {
            display: inline;
        }
        .gallery img
        {
            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
        }
        .gallery div a:hover img
        {
            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
        }
        .gallery div a:hover
        {
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox.css" media="screen" />
    <script type="text/javascript">
        $(function () {
            $('#gallery1 a').each(function () {
                if ($(this).find('img').attr('src') == '') {
                    $(this).removeAttr('rel');
                }
            });
            $('#gallery1 a').lightBox({ fixedNavigation: true });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="gallery1" class="gallery">
        <div runat="server">
            <asp:Repeater ID="rptPhotogallary" runat="server" OnItemDataBound="rptPhotogallary_ItemDataBound">
                <ItemTemplate>
                    <div class="imageRow">
                        <div class="border">
                            <li>
                                <asp:HiddenField ID="hfId" runat="server" Value='<%#Eval("id")%>' />
                                <span>
                                    <%# Eval("EventName")%></span> <a href='<%#Eval("defaultImg","photos/{0}")%>' rel='<%# string.Format("prettyPhoto[{0}]",Eval("id")) %>'>
                                        <img src='<%#Eval("defaultImg","photos/{0}")%>' style="height: 100px" alt="" class="example-image" /></a>
                                <asp:Repeater ID="rptImagegallary" runat="server">
                                    <ItemTemplate>
                                        <a href='<%#Eval("ImageName","photos/{0}")%>' rel='<%# string.Format("prettyPhoto[{0}]",Eval("Eventid")) %>'>
                                        </a>
                                    </ItemTemplate>
                                </asp:Repeater>
                                <br />
                                <br />
                            </li>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindRepeater();
    }
}

private void BindRepeater()
{
    DataTable dt = GetData("SELECT id,EventName,defaultImg FROM [photogallery]");
    rptPhotogallary.DataSource = dt;
    rptPhotogallary.DataBind();
}

private DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

protected void rptPhotogallary_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        HiddenField hfId = (e.Item.FindControl("hfId") as HiddenField);
        DataTable dt = GetData("SELECT id,imagename,Eventid FROM gallaryimages WHERE Eventid =" + hfId.Value + "");
        Repeater rptImagegallary = (e.Item.FindControl("rptImagegallary") as Repeater);
        rptImagegallary.DataSource = dt;
        rptImagegallary.DataBind();
    }
}

VB.Net

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            BindRepeater()
        End If
    End Sub

    Private Sub BindRepeater()
        Dim dt As DataTable = GetData("SELECT id,EventName,defaultImg FROM [photogallery]")
        rptPhotogallary.DataSource = dt
        rptPhotogallary.DataBind()
    End Sub

    Private Function GetData(ByVal query As String) As DataTable
        Dim dt As DataTable = New DataTable()
        Dim constr As String = ConfigurationManager.ConnectionStrings("ConString").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using cmd As SqlCommand = New SqlCommand(query)
                Using sda As SqlDataAdapter = New SqlDataAdapter()
                    cmd.CommandType = CommandType.Text
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    sda.Fill(dt)
                End Using
            End Using

            Return dt
        End Using
    End Function

    Protected Sub rptPhotogallary_ItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
        If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim hfId As HiddenField = (TryCast(e.Item.FindControl("hfId"), HiddenField))
            Dim dt As DataTable = GetData("SELECT id,imagename,Eventid FROM gallaryimages WHERE Eventid =" & hfId.Value & "")
            Dim rptImagegallary As Repeater = (TryCast(e.Item.FindControl("rptImagegallary"), Repeater))
            rptImagegallary.DataSource = dt
            rptImagegallary.DataBind()
        End If
    End Sub

Screenshot