我怀疑我错过了一些愚蠢的东西,因为这几乎(但不完全)有效。应该在lighbox中显示的图像会加载,但会显示。主网站上的Fluidbox演示按预期工作,但即使使用与示例页面中相同的JS和CSS链接,我似乎无法将其作为最小示例工作。
<html>
<head>
</head>
<body>
<h1>Fluidbox Test</h1>
<p>A bit of para text before the images</p>
<div id="SomeRow" class="SomeClass">
<!-- images display, but clicking on the images does not display the larger images, though lightbox does show with empty content -->
<!-- large images load on request - you can see that in Firebug - but they never display in the light box -->
<a href="http://dragoons.info/photos/2008 Season/New Haven/00140.jpg" title="00140.jpg" data-fluidbox=""><img src="http://dragoons.info/photos/2008 Season/New Haven/Thumbs/00140.jpg" /></a>
<a href="http://dragoons.info/photos/2008 Season/New Haven/00144.jpg" title="00144.jpg" data-fluidbox=""><img src="http://dragoons.info/photos/2008 Season/New Haven/Thumbs/00144.jpg" /></a>
<a href="http://dragoons.info/photos/2008 Season/New Haven/00149.jpg" title="00149.jpg" data-fluidbox=""><img src="http://dragoons.info/photos/2008 Season/New Haven/Thumbs/00149.jpg" /></a>
</div>
<p>A bit text after the images</p>
<!-- script and CSS links are same as used by Fluidbox web site, so this should work, in theory -->
<!-- http://terrymun.github.io/Fluidbox/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation -->
<!-- Fluidbox works fine there, but does not display images when when clicked in this example -->
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Fluidbox -->
<script type="text/javascript" src="http://terrymun.github.io/Fluidbox/jquery.fluidbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://terrymun.github.io/Fluidbox/css/fluidbox.css" media="all" />
<script>
//start the show
$(window).load(function () {
$("a").fluidbox(); //images adjusted to Fluidbox format in generated HTML, so this part works
});
</script>
</body>
</html>
我错过了什么?代码运行没有错误。我可以通过Firebug看到成功的图像加载请求,但图像永远不会添加到&#34; fluidbox-ghost&#34;元素通过&#34;背景图像&#34;就像在Fluidbox演示页面中一样。使用FireFox 33.1和Safari 5.1.4。
答案 0 :(得分:0)
没关系,我明白了。 Fluidbox无法正常使用图像链接中的空格。用&#34;%20&#34;替换URL中的空格一切都按预期工作。