Question

我正在尝试将lightbox插件与我的aspx页面合并以加载图像。我有一个主文件，我已经在其中包含了lightbox和jquery javascript文件和css文件的引用。

我有一个div元素，其中我指定了一个文本，点击文本我需要灯箱插图显示图像。

请找到aspx页面下面的代码。

＆＃13;

<%@ 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">
	<!-- Left side column. contains the logo and sidebar -->
	<!-- Right side column. Contains the navbar and content of the page -->
	<aside class="right-side">
	<!-- Content Header (Page header) -->
	<section class="content-header">
	<h1>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		<li class="active">Student Details</li>
		<li><a href="/AcuityBase/Home/Contact">Contact</a></li>
		<br>
		 Last Updated on : 01 Jan 2015 Hrs CST </br>
	</ol>
	</section>
	<div class="row">
		<div class="col-xs-12 connectedSortable">
		</div>
		<!-- /.col -->
	</div>
	<br />
	<!-- /.row -->
	<!-- Main row -->
	<div class="row">
		<!-- Left col -->
		<section class="col-lg-6 connectedSortable">
		<!-- Box (with bar chart) -->
		<div id="loading-example">
			<div class="box-body no-padding">
				<div class="row">
					<div class="col-sm-7">
					</div>
				</div>
			</div>
		</div>
		</section>
	</div>
	<section class="content">
	<ul id="tabs">
	</ul>
	<div id="content">
		<p>
			<a class="frame" data-lightbox="example-set" href= "content/img/avatar3.png"> Load Tableau Report</a>
		</p>
	</div>
	<div id="tab1">
		<div id="tab2">
		</div>
		<div id="tab3">
		</div>
	</div>
	<!-- top row -->
	<!-- /.row -->
	</section>
	<!-- /.content -->
	</aside>
</div>
</center>
</asp:Content>

＆＃13;

我在主文件中包含了jquery和lightbox插件的refences以及lightbox css。代码在

之下

＆＃13;

<!-- 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" />

＆＃13;

当我点击文字时，它会在同一个窗口中加载图片而不是灯箱类型。

有人可以帮我解决这个问题吗？

Answer 1

您使用错误的选择器来启动灯箱。

目前：

<script type="text/javascript">
        $(function () {
            $('#frame a').lightBox();
        });
</script>

Insteaf of：

<script type="text/javascript">
        $(function () {
            $('a.frame').lightBox();
        });
</script>

aspx页面中的灯箱

1 个答案: