无法使Fluidbox 1.4.2正常工作

时间:2014-11-28 17:50:56

标签: javascript jquery

我怀疑我错过了一些愚蠢的东西,因为这几乎(但不完全)有效。应该在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。

1 个答案:

答案 0 :(得分:0)

没关系,我明白了。 Fluidbox无法正常使用图像链接中的空格。用&#34;%20&#34;替换URL中的空格一切都按预期工作。