Question

我正在尝试将jQuery Lightbox插件实现到基于CodeIgniter的投资组合网站构建中。我可以让灯箱加载并在点击图像时显示。但是，应该显示的图像（如close，next，prev等）不会加载到灯箱中。

<script src="<?php echo base_url(); ?>js/libs/jquery-1.6.2.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
    $(function() {
      $('a.lightbox').lightBox(); // Select all links with lightbox class
    });
</script>

我还尝试更改.js文件中图像的文件路径，但它返回了断开的链接。是否有某种url帮助器指向正确方向的javascript或我在错误的文件夹中？我已经尝试过root，js文件夹（与脚本相同的文件夹）和views文件夹。

Answer 1

好吧，看起来你正在构建你的网址。根据您的代码，JS文件夹位于同一级别的应用程序文件夹中。确保它适合您！

APPLICATION（<?php echo base_url();?>application/）
SYSTEM
JS（<?php echo base_url();?>js/）;
的index.php

您可能还想检查.htaccess是否阻止您访问该文件夹（IIRC该软件包附带了“全部拒绝”.htaccess规则，但在应用程序文件夹中。如果您有自定义，已修改。可能阻止图像显示的htaccess）。

正如史蒂夫·刘易斯所说，如果NET选项卡或类似的东西显示404资源，请检查Firebug或IE或Chrome的开发工具（通常是键盘上的F12）。
您是否尝试查看源并单击脚本链接？您是否尝试直接在浏览器中访问图像？

Answer 2

此处存在相同问题，在此论坛中找到了解决方案：http://forums.modx.com/index.php?topic=44367.0

更改CSS文件什么也没做，但我注意到“关闭” 我缺少的GIF没有在股票lightbox.css中指定文件要么。这让我看看lightbox_lang_en.js，我在哪里发现图像的路径没有前导斜杠，使浏览器在错误的地方寻找它们。我加了领先斜线，它开始工作。这是我修改过的 lightbox_lang_en.js：

Answer 3

问题是按钮图像路径被破坏了。解决方案是编辑lightbox.js核心文件并修复图像。修复（lb-next，lb-prev，lb-close，lb-load）类的background-image属性。在我的情况下，我清除了一个../

Answer 4

最简单的方法是运行Firebug并在Net选项卡中查找未找到的图像，然后通过在那里移动文件或更改代码中的路径来更正路径。

我假设您已包含灯箱CSS文件（我在上面的代码中没有看到它）

您也可以在调用灯箱时指定所需图像的位置，如下所示：

<script type="text/javascript">
    $(function() {
      $('a.lightbox').lightBox({
         'imageLoading': "<?php echo site_url(); ?>images/lightbox-ico-loading.gif",
         'imageBtnClose': "<?php echo site_url(); ?>images/lightbox-btn-close.gif",
         'imageBtnPrev': "<?php echo site_url(); ?>images/lightbox-btn-prev.gif",
         'imageBtnNext': "<?php echo site_url(); ?>images/lightbox-btn-next.gif",
         'imageBlank': "<?php echo site_url(); ?>images/lightbox-blank.gif"
      }); // Select all links with lightbox class
    });
</script>

列出了here的变量。

带有CodeIgniter缺失图像的jQuery Lightbox

4 个答案: