using lightbox in asp.net
Step 1) Download Jquey Lightbox from
Step 2) Create a Webpage
Step 3) Copy all js and css folder to your website then Add .js and .css files reference as shown below.
//make sure paths are correct
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/screen.css" rel="stylesheet" />
Step 4) Add Image to web page
for ex:
Click on Text link display image
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> or click on thumb nail image display image.<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src='Step 5) Step 4 for single image. Step 6) for multiple images/Popup Image gallery. Add n number of images as shown step 4. and name all images as single group (as shown below.)'/></a>images/image-1.jpg<a href="images/image-1.jpg" rel="lightbox[groupname]" title="my caption"><img src=''/></a>images/image-1.jpg<a href="images/image-2.jpg" rel="lightbox[groupname]" title="my caption"><img src='Step 7) Make sure all image paths are correct, run the web page.'/></a>images/image-2.jpg
Complete Code and Images
For focus rectangle on mouse move on images, pls set
<div class="single first"> defined in screen.css
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Lightbox-API-ASPNET.aspx.cs"
Inherits="WebApplication1.LightBoxUI.Lightbox_API_ASPNET" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/screen.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="imageRow">
<div class="set">
<div class="single first">
<a href="../images/Ambassador_brand.jpg" rel="lightbox[brands]" title="Ambassador Brand"><img src="../images/Ambassador_brand.jpg" /></a>
</div>
<div class="single">
<a href="../images/Bata_brand.jpg" rel="lightbox[brands]" title="Bata Brand"><img src="../images/Bata_brand.jpg" /></a>
</div>
<div class="single">
<a href="../images/footin_brand.jpg" rel="lightbox[brands]" title="Footin Brand"><img src="../images/footin_brand.jpg" /></a>
</div>
<div class="single">
<a href="../images/North-Star_brand.jpg" rel="lightbox[brands]" title="North Star Brand"><img src="../images/North-Star_brand.jpg" /></a>
</div>
<div class="single last">
<a href="../images/power_brand.jpg" rel="lightbox[brands]" title="Power Brand"><img src="../images/power_brand.jpg" /></a>
</div>
</div>
</div>
</form>
</body>
</html>
tags: Jquery image gallery using lightbox in asp.net, using lightbox in asp.net, jquery image gallery,popup image gallery in asp.net
No comments:
Post a Comment