Skip to main content

Photoalbum using ListView and Lightbox jquery plugin

In this post i am going to show you how to create a simple photo album in using ListView and Jquery Lightbox plugin

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="Scripts/jquery.lightbox-0.5.js" type="text/javascript"></script>

    <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .productlist li
            dispaly: inline;
            float: left;
            margin-left: 15px;
            margin-bottom: 15px;
            border: 0;
            margin: 0;
            padding: 0;
            background: #fff;
            color: #777;
            padding: 50px;
            position: relative;
            float: left;
            width: 600px;
            color: #000;
            background: inherit;
            border-bottom: 1px dashed #ccc;
            color: #933;
            font: 32px Georgia, serif;
            font-weight: bold;
            margin: 0 0 20px;
            padding: 0 0 15px;
            text-align: center;
            width: 700px;
            cursor: default;
            list-style: none;
        .gallery img
            background: #fff;
            border-color: #aaa #ccc #ddd #bbb;
            border-style: solid;
            border-width: 1px;
            color: inherit;
            padding: 2px;
            vertical-align: top;
            width: 100px;
            height: 75px;
        .gallery li
            background: #eee;
            border-color: #ddd #bbb #aaa #ccc;
            border-style: solid;
            border-width: 1px;
            color: inherit;
            display: inline;
            float: left;
            margin: 3px;
            padding: 5px;
            position: relative;

    <script type="text/javascript">
        $(function() {
            $('#images  a').lightBox({ fixedNavigation: true });


    <form id="form1" runat="server">
        Image Gallery</h1>
    <div id="page">
        <div id="images">
            <asp:ListView ID="lvPhotoViewer" runat="server" ItemPlaceholderID="itemContainer">
                    <ul class="gallery">
                        <asp:PlaceHolder ID="itemContainer" runat="server" />
                    <li><a href='<%# "~"+Eval("ImageUrl") %>' runat="server" id="imgHref">
                        <asp:Image runat="server" ID="imPhoto" Width="150px" Height="150px" ImageUrl='<%# "~"+Eval("ImageUrl") %>' />
                        <br />
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        lvPhotoViewer.DataSource = new Photo().GetAll();
public class Image
    public string Name { get; set; }
    public string ImageUrl { get; set; }
    public List<Image> GetAll()
        List<Image> images = new List<Image>()
            new Image(){Name="Creek",ImageUrl="/images/Creek.jpg"},
            new Image(){Name="Dock",ImageUrl="/images/Dock.jpg"},
            new Image(){Name="Forest",ImageUrl="/images/Forest.jpg"},
            new Image(){Name="Garden",ImageUrl="/images/Garden.jpg"},
            new Image(){Name="Creek",ImageUrl="/images/Creek.jpg"},
        return images;



{Download }


Post a Comment

Popular posts from this blog