2015-01-21 71 views
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" />

當我在文本中單擊,它的加載在同一窗口,而不是在一個燈箱式圖像。

任何人都可以幫助我嗎?

回答

0

您使用錯誤的選擇器來啓動燈箱。

目前:

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

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

的Insteaf