燈箱畫廊小部件在新窗口中打開圖像
[英]Lightbox gallery widget opens the image in a new window
問題描述
我一直在使用我網站上的燈箱畫廊小部件來創建圖片畫廊。 但它會在新窗口而不是燈箱中打開圖像。 它在空白網站上工作正常，但在我的任何網頁上都無法正常工作。 我的猜測是與我使用的其他一些 javascript 文件存在沖突（我的頁面將 javascript 用於 SpryMenu-s 和顯示在較小屏幕尺寸上的響應式側邊菜單欄。）我沒有更改任何代碼燈箱並允許 Dreamweaver 自動插入樣式表和腳本。
我查過這個問題，我似乎沒有其他答案中提到的任何問題。 我所有的圖像、樣式表和腳本似乎都正確鏈接。 畫廊 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 個解決方案
解決方案1
0 2014-05-21 05:30:38
你的jQuery是舊的。 我用新的 jquery 加載（使用 getScript）在你的項目上嘗試了同樣的事情。 它開始工作了。 因此，解決方案是“添加一個新的 jQuery”。 但是由於不支持 $.browser 問題，因此引發了該問題。
解決方案2
0 已采納 2014-05-21 05:56:53
我下載了你的頁面並做了准確的步驟，解決了我的問題：
所以：
//$(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
是否需要一個可以從圖片文件夾中調用，沒有縮略圖並且只需單擊一次即可打開的燈箱畫廊？
[英]Need a lightbox gallery that calls from image folder, no thumbnails and opens from one button click?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.