Lightbox gallery小部件在新窗口中打开图像
我一直在使用我网站上的灯箱图库小部件来创建图片库。但它会在新窗口中打开图像，而不是在灯箱中打开。它在空白网站上运行正常，但在我的任何网页上都没有。我的猜测是与我使用的其他一些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<br />
<br />
<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<br />
<br />
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.<br />
<br />
<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>
<br />
</div>
<br />
</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 个答案:
答案 0 :(得分：0)
你的jQuery很老了。我使用新的jquery加载（使用getScript）在你的项目上尝试了同样的事情。它开始起作用了。因此解决方案是“添加一个新的jQuery”。但由于不支持，因此会引发$ .browser问题。
答案 1 :(得分：0)
我下载了您的网页并执行了一步，解决了我的问题：
所以：
//$(document).ready(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'
});
//});
删除或注释掉$（document）.ready（function（）{
的行它会起作用。 ：d
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？