0
我想将我的aspx页面的lightbox插件合并到一个图像中。我有一个主文件,并且在其中包含了lightbox和jquery javascript文件和css文件的引用。灯箱在aspx页面
我有一个div元素,其中我有一个指定的文本,点击文本我需要灯箱plugn显示图像。
请在下面找到aspx页面的代码。
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
javascript: window.history.forward(1);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
$(function() {
$('#frame a').lightBox();
});
</script>
<center>
<div class="wrapper row-offcanvas row-offcanvas-left">
\t <!-- Left side column. contains the logo and sidebar -->
\t <!-- Right side column. Contains the navbar and content of the page -->
\t <aside class="right-side">
\t <!-- Content Header (Page header) -->
\t <section class="content-header">
\t <h1>
\t </h1>
\t <ol class="breadcrumb">
\t \t <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
\t \t <li class="active">Student Details</li>
\t \t <li><a href="/AcuityBase/Home/Contact">Contact</a></li>
\t \t <br>
\t \t Last Updated on : 01 Jan 2015 Hrs CST </br>
\t </ol>
\t </section>
\t <div class="row">
\t \t <div class="col-xs-12 connectedSortable">
\t \t </div>
\t \t <!-- /.col -->
\t </div>
\t <br />
\t <!-- /.row -->
\t <!-- Main row -->
\t <div class="row">
\t \t <!-- Left col -->
\t \t <section class="col-lg-6 connectedSortable">
\t \t <!-- Box (with bar chart) -->
\t \t <div id="loading-example">
\t \t \t <div class="box-body no-padding">
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-sm-7">
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t </section>
\t </div>
\t <section class="content">
\t <ul id="tabs">
\t </ul>
\t <div id="content">
\t \t <p>
\t \t \t <a class="frame" data-lightbox="example-set" href= "content/img/avatar3.png"> Load Tableau Report</a>
\t \t </p>
\t </div>
\t <div id="tab1">
\t \t <div id="tab2">
\t \t </div>
\t \t <div id="tab3">
\t \t </div>
\t </div>
\t <!-- top row -->
\t <!-- /.row -->
\t </section>
\t <!-- /.content -->
\t </aside>
</div>
</center>
</asp:Content>
我已经包含在主文件中的jQuery和灯箱插件的refences与灯箱CSS一起。代码如下
<!-- LightBox -->
<script type="text/javascript" src="content/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="content/js/lightbox.js"></script>
<link href="content/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
当我在文本中单击,它的加载在同一窗口,而不是在一个灯箱式图像。
任何人都可以帮助我吗?