Photoalbum using ListView and Lightbox jquery plugin

7:04:00 am 0 Comments

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


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

<!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 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" />
    <title></title>
    <style type="text/css">
        .productlist li
        {
            dispaly: inline;
            float: left;
            margin-left: 15px;
            margin-bottom: 15px;
        }
        *
        {
            border: 0;
            margin: 0;
            padding: 0;
        }
        body
        {
            background: #fff;
            color: #777;
            padding: 50px;
        }
        #page
        {
            position: relative;
        }
        #images
        {
            float: left;
            width: 600px;
        }
        #details
        {
            color: #000;
        }
        h1
        {
            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;
        }
        .gallery
        {
            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;
        }
    </style>

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

        });
    </script>

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




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();
        lvPhotoViewer.DataBind();
    }
}
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;

    }


}
 
 
 
 
 

Unknown

0 comments:

Subscribe to: Post Comments (Atom)