This article I will show you how you can create a facebook
style lightbox jquery plugin to display images in asp.net.
Some of my previous articles are as follows: Asp.Net
Dynamic jQuery Photo Gallery Plugin With Zoom Effect Using Css, Magnifying
Glass Effect Of Image Using jQuery in MVC, Blink
Title or Multiple Browser Title Using jQuery in Asp.Net, MVC, Webcam
Integration Using jQuery Webcam Plugin In Asp.Net, Three
Level Menus With Disable Menu Item Using jQuery In Asp.Net, MultiSelect
DropdownList Using jQuery in Asp.Net MVC and C#.Net.
So for this article first we need to create a new asp.net application and add the below page reference into the page.
So for this article first we need to create a new asp.net application and add the below page reference into the page.
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/facebox.js" type="text/javascript"></script>
<link href="css/facebox.css" media="screen"
rel="stylesheet"
type="text/css"
/>
<link href="css/example.css" media="screen"
rel="stylesheet"
type="text/css"
/>
|
After this add the below jquery code int the header of the page.
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('a[rel*=facebox]').facebox({
loadingImage: 'Images/loading.gif',
closeImage: 'Images/closelabel.png'
})
})
</script>
|
Now check the complete code of the 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>Facebook
Style Lightbox jQuery Plugin To Display Images In Asp.Net </title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/facebox.js" type="text/javascript"></script>
<link href="css/facebox.css" media="screen"
rel="stylesheet"
type="text/css"
/>
<link href="css/example.css" media="screen"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('a[rel*=facebox]').facebox({
loadingImage: 'Images/loading.gif',
closeImage: 'Images/closelabel.png'
})
})
</script>
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<a href="images/stairs.jpg" rel="facebox"><b>Click To
View Effect</b></a>
</form>
</body>
</html>
|
Here we are detecting
the image with the help of rel tag value. Now we have done run the application
to check the output.
About the Author
0 comments:
Please let me know your view