灯箱无法在我的 wordpress 网站上正确加载答案

【问题标题】：Lightbox will not load properly on my wordpress site灯箱无法在我的 wordpress 网站上正确加载
【发布时间】：2014-10-01 10:42:48
【问题描述】：

我无法让灯箱 http://lokeshdhakar.com/projects/lightbox2 工作。我已经能够创建一个新的测试 html 文档并让灯箱工作。但是，当我将其放入我的网站时，我只能加载图像。我的网站由 (header.php----portfolio.php(main content)----footer.php)

组成

Header.php

<head>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/screen.css">

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/lightbox.css">

<script language="javascript" type="text/javascript"></script>
</head>
<body>
<!--header end-->

Portfolio.php

<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" alt="image-1" />'

页脚.php

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>

我对此感到迷茫，希望能得到一些帮助。

【问题讨论】：

抱歉，您缺少（并不是说这会解决您的问题）
我有。只是没有复制到这里

标签： php jquery wordpress lightbox

【解决方案1】：

您的图片需要指向原始图片的链接：

Portfolio.php

<a href="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" data-lightbox="image-1" data-title="My caption">
  <img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1-small.jpg" alt="image-1" />
</a>

【讨论】：

我这样做了，现在发生的是图像在新页面上打开，而不是灯箱加载。某些原因导致灯箱无法加载....
在包含 lightbox.js 和 jquery 时尝试添加<?php bloginfo('template_directory'); ?>：<script src="<?php bloginfo('template_directory'); ?>js/jquery-1.11.0.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>js/lightbox.js"></script>
我试过了，但没有任何改变。然后我尝试在 js 之前添加一个“/”。
控制台有错误吗？ js文件的路径是否正确？
好的，我知道了！你是对的用于 lightbox.js 和 jquery.js！ CSS 链接显然需要一个'/' infront。

【解决方案2】：

查看它提到的 Lightbox 文档，您需要以这种方式列出图像。

将 data-lightbox 属性添加到任何图像链接以激活 Lightbox。对于属性的值，为每个图像使用一个唯一的名称。例如：

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

【讨论】：