Home > ASP.Net, Jquery > JQuery Photo Gallery

JQuery Photo Gallery


Hi all,

try this example to use JQuery to make Photo Gallery


<%@ 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">
<title>AJAX Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="http://sandbox.scriptiny.com/slideshow/style.css" />
</head>
<body>
<div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul id="thumbs">
</HeaderTemplate>
<ItemTemplate>
<li value='<%#Eval("Value") %>'><img src='<%# Eval("ImagePath") %>' width="179" height="100" alt="" /></li>
</ItemTemplate>
<FooterTemplate>
</ul></FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'http://sandbox.scriptiny.com/slideshow/fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 5;
</script>
<script type="text/javascript" src="http://sandbox.scriptiny.com/slideshow/slide.js"></script>
</body>
</html>

and in code behind :-


using System;
using System.Collections;
using System.Configuration;
using System.Data;
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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var list = (new[] { new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/1.jpg", Value = "1" } }).ToList();
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/2.jpg", Value = "2" });
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/3.jpg", Value = "3" });
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/4.jpg", Value = "4" });
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/5.jpg", Value = "5" });
Repeater1.DataSource = list;
Repeater1.DataBind();

}
}

hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: