我一直在我的网站上使用灯箱图库小部件来创建图片库 . 但它会在新窗口中打开图像，而不是在灯箱中打开 . 它在空白网站上运行正常，但在我的任何网页上都没有 . 我的猜测是与我使用过的其他一些javascript文件存在冲突（我的页面使用javascript进行spry菜单以及响应性的菜单栏显示在较小的屏幕尺寸上 . ）我没有更改灯箱的任何代码并允许Dreamweaver自动插入样式表和脚本 .
我已经查找了这个问题，我似乎没有其他答案中提到的任何问题 . 我的所有图像，样式表和脚本似乎都正确链接 . gallery div已经链接到正确的类 . 我似乎无法弄清楚问题出在哪里 .
这是使用图库的网站上的一个页面：http://ruchikanambiar.com/Projects/scenes.html
这是我上面的HTML代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Ruchika Nambiar | Scenes</title>
<link rel="stylesheet" href="../SpryAssets/slidebars.min.css">
<link href="../CSS Stylesheets/home.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
color: #D6D6D6;
background-image: url(../Image/patt-01.png);
background-repeat: repeat;
}
</style>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/lightbox.js" type="text/javascript"></script>
<link href="../favicon-01.ico" rel="shortcut icon" />
<style type="text/css">
a:link {
color: #999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #F03;
}
a:active {
text-decoration: none;
color: #F03;
}
</style>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="../css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="../css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-33584208-1', 'ruchikanambiar.com');
ga('send', 'pageview');
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: transparent;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 100%;
height: auto;
text-align:left;
}
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: transparent;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px:
}
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
/* EndOAWidget_Instance_2127022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="sb-site">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="wrapper">
<div id="toplinks"><a href="../Home.html"><img src="../Image/toplink-01.png" width="17" height="15" alt="Home"/></a> <a href="../Contact.html"><img src="../Image/toplink-02.png" width="22" height="17" alt="Contact" /></a></div>
<div id="top">
<div id="logopic"><img src="../Image/Logo-01.png" width="64" height="64" border="0" /></div>
<div id="logo">RUCHIKA NAMBIAR</div>
<div id="menu">
<div class="sb-toggle-right">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../Home.html" title="Home">HOME</a></li>
<li><a href="../About.html" title="About">ABOUT</a></li>
<li><a href="../Projects.html" title="Projects" class='MenuBarItemActive'>PROJECTS</a></li>
<li><a href="../Graphic Design.html" title="Graphic Design">GRAPHIC DESIGN</a></li>
<li><a href="../Resume.html" title="Resume">RÉSUMÉ</a></li>
<div align="right"></div>
</ul>
</div>
</div>
<div id="main">
<div id="mainleft">PROJECTS
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="the-breadcrumb.html">The Breadcrumb</a></li>
<li><a href="grandma-wars.html">Grandma Wars</a></li>
<li><a href="living-library.html">The Living Library of Dystopia</a></li>
<li><a href="scenes.html" class='MenuBarItemActive'>Scenes</a></li>
<li><a href="sibling-book.html">The Little Book of Sibling Love</a></li>
<li><a href="invisible-cities.html">Illustrated Invisible Cities</a></li>
<li><a href="above-is-below.html">Above is Below Diorama</a></li>
<li><a href="fountainhead-fonts.html">Fountainhead Fonts</a></li>
<li><a href="type-factory.html">Type Factory</a></li>
<li><a href="misandry-spelt-backwards.html">Misandry Spelt Backwards</a></li>
<li><a href="royalty-cards.html">Royalty Cards</a></li>
<li><a href="cry-animation.html">C.R.Y Animation</a></li>
<li><a href="adventures.html">The Adventures of Time & Circumstance</a></li>
<li><a href="storybookme-video.html">Storybook Me Video</a></li>
</ul>
</div>
<div id="mainright">
<div id="hiddenheader">PROJECTS</div>
<div id="projecthead">Scenes</div>
<div id="prevnext"><a href="living-library.html"><PREV</a> | <a href="sibling-book.html">NEXT></a></div>
ILLUSTRATED CARDS DEPICTING MEMORIES: Work in progress
This project is an attempt to build and cement memory, in the form of illustrated snapshots that depict “scenes” from my own life, which once put together, can create a metaphoric stopmotion of my life. The intention is to create an ever-growing collection of cards.
<div id="rightcontent">
<div id="gallery" class="lbGallery">
<ul>
<li> <a href="../Image/FullImages/Projects/New folder (3)/1.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/1.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/2.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/2.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/3.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/3.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/4.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/4.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/5.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/5.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/6.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/6.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/7.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/7.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/8.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/8.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/9.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/9.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/10.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/10.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/11.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/11.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/12.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/12.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/13.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/13.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/14.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/14.jpg" alt="" width="72" height="72" /></a> <a href="../Image/FullImages/Projects/New folder (3)/15.jpg"><img src="../Image/Thumbnails/Projects/New folder (3)/15.jpg" alt="" width="72" height="72" /></a> </li>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: '../images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '../images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '../images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '../images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '../images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#999999", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: .6, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'
});
});
// EndOAWidget_Instance_2127022
</script>
<p> </p>
</div>
</div>
</div>
<div id="footer">
<div id="like">
<div class="fb-like" data-href="http://ruchikanambiar.com/" data-width="100px" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true">
</div>
</div>
<div id="copyright">© Ruchika Nambiar</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
<div class="sb-slidebar sb-right">
<nav>
<div id="sidetopbar"><a href="../Home.html"><img src="../Image/Logo-01.png" width="80" height="80" alt="logo" /></a></div>
<p><a href="../Home.html" title="Home">HOME</a></p>
<p><a href="../About.html" title="About">ABOUT</a></p>
<p><a href="../Projects.html" title="Projects">PROJECTS</a></p>
<p><a href="../Graphic Design.html" title="Graphic Design">GRAPHIC DESIGN</a></p>
<p><a href="../Resume.html" title="Resume">RÉSUMÉ</a></p>
<div id="sidemiddlebar"></div>
<p><a href="../Journal.html" title="Journal">JOURNAL</a></p>
<p><a href="../Contact.html" tite="Contact">CONTACT</a></p>
</nav>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../SpryAssets/slidebars.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
var mySlidebars = new $.slidebars();
$('.my-button').on('click', function() {
mySlidebars.open('left');
});
$('.my-other-button').on('click', function() {
mySlidebars.toggle('right');
});
$('.my-third-button').click(mySlidebars.close);
});
}) (jQuery);
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
2 回答
我下载了你的页面并完成了一步，解决了我的问题：
所以：
remove or comment out the lines of $(document).ready(function(){
它会起作用 . ：d
你的jQuery很老了 . 我使用新的jquery加载（使用getScript）在你的项目上尝试了同样的事情 . 它开始起作用了 . 因此解决方案是“添加一个新的jQuery” . 但由于不支持，因此引发了$ .browser问题 .