This article will show you how you can asp.net dynamic
jquery photo gallery plugin with zoom effect using css. In this gallery will
open with light box effect. This plugin
I have taken the from the link.
Some of my previous articles are as follows: Magnifying
Glass Effect Of Image Using jQuery in MVC, Blink
Title or Multiple Browser Title Using jQuery in Asp.Net, MVC, Three
Level Menus With Disable Menu Item Using jQuery In Asp.Net, jQuery
Dialog Box Open with Blind and Close With Explode Effect in Asp.Net, jQuery
Digital Clock For Asp.Net, MVC and HTML Applications, jQuery
Datepicker Calendar With Slide Down Effect In Asp.Net, jQuery
Code To Select Multiple Item By Pressing Ctrl Button In Asp.Net, jQuery
Animated Resizable Panel OR Div Control On Mouse Click In Asp.Net.
So for this article first we will create a new asp.net application and add the below code into page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!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>Asp.Net
Dynamic jQuery Photo Gallery Plugin With Zoom Effect Using Css</title>
<link href="css/mainbodycss.css" rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/zoom.css" media="all" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div id="galleryDiv" runat="server">
</div>
</div>
</form>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/zoom.min.js" type="text/javascript"></script>
</body>
</html>
|
In above code I have added the jquery file reference in the
page body. And add css in the header of the page. Her ei have created a div
with tag runat=”server”.
Now check the cs code of the page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
string
gallerystring = "";
DataTable
dt = new DataTable();
dt = ImageData();
gallerystring = "<div class=\"gallery\">";
for
(int i = 0; i < dt.Rows.Count; i++)
{
gallerystring = gallerystring
+ "<div><a href='" +
dt.Rows[i]["PathLarger"].ToString()
+ "'><img src='" +
dt.Rows[i]["PathSmall"].ToString()
+ "' /></a></div>";
}
gallerystring = gallerystring + "</div>";
galleryDiv.InnerHtml = gallerystring;
}
/// <summary>
/// Replace this function data from your DB data
/// </summary>
/// <returns></returns>
public
DataTable ImageData()
{
DataTable
dt = new DataTable("ImageGal");
dt.Columns.Add(new DataColumn("PathLarger",
typeof(string)));
dt.Columns.Add(new DataColumn("PathSmall", typeof(string)));
DataRow
dr = dt.NewRow();
dr["PathSmall"]
= "img/gallery/DSC_0008-69x69.jpg";
dr["PathLarger"]
= "img/gallery/DSC_0008-660x441.jpg";
dt.Rows.Add(dr);
DataRow
dr1 = dt.NewRow();
dr1["PathSmall"]
= "img/gallery/DSC_0014-69x69.jpg";
dr1["PathLarger"]
= "img/gallery/DSC_0014-660x441.jpg";
dt.Rows.Add(dr1);
DataRow
dr2 = dt.NewRow();
dr2["PathSmall"]
= "img/gallery/DSC_0019-69x69.jpg";
dr2["PathLarger"]
= "img/gallery/DSC_0019-660x441.jpg";
dt.Rows.Add(dr2);
DataRow
dr3 = dt.NewRow();
dr3["PathSmall"]
= "img/gallery/DSC_0061-69x69.jpg";
dr3["PathLarger"]
= "img/gallery/DSC_0061-660x441.jpg";
dt.Rows.Add(dr3);
DataRow
dr4 = dt.NewRow();
dr4["PathSmall"]
= "img/gallery/DSC_0063-69x69.jpg";
dr4["PathLarger"]
= "img/gallery/DSC_0063-441x660.jpg";
dt.Rows.Add(dr4);
DataRow
dr5 = dt.NewRow();
dr5["PathSmall"]
= "img/gallery/DSC_0090-69x69.jpg";
dr5["PathLarger"]
= "img/gallery/DSC_0090-660x441.jpg";
dt.Rows.Add(dr5);
return
dt;
}
}
}
|
Here in aboce code I have created a function for data. You
can add your own code to fatch the data from DB. In above code after getting data
from Db I have prepared a string of images in the gallery format. This string I
have bind with the div control. Now we have done run the application to chellk
the output.
About the Author
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete