Лайтбокс не загружается должным образом на моем сайте WordPress

У меня возникли проблемы с запуском лайтбокса http://lokeshdhakar.com/projects/lightbox2. Мне удалось создать новый тестовый html-документ и заставить работать лайтбокс. Однако, когда я помещаю его на свой веб-сайт, я могу только загрузить изображения. Мой сайт состоит из (header.php----portfolio.php(основной контент)----footer.php)

Заголовок.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-->

Портфолио.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>

Я потерялся в этом и был бы признателен за помощь.


wordpress php jquery lightbox
person garydos34    schedule 08.08.2014    source источник
comment
Извините, но вам не хватает ‹!DOCTYPE html›‹html› (но это не решит вашу проблему)   -  person GramThanos    schedule 08.08.2014
comment
У меня есть это. Просто не скопировал это сюда   -  person garydos34    schedule 08.08.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вашему изображению нужна ссылка на исходное изображение:

Портфолио.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>
person Nico Martin    schedule 08.08.2014
comment
Я сделал это, и теперь происходит то, что изображение открывается на новой странице, а не загружается лайтбокс. Что-то заставляет лайтбокс не загружаться.... - person garydos34; 08.08.2014
comment
Попробуйте добавить <?php bloginfo('template_directory'); ?> при включении lightbox.js и jquery: <script src="<?php bloginfo('template_directory'); ?>js/jquery-1.11.0.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>js/lightbox.js"></script> - person Nico Martin; 09.08.2014
comment
Я попробовал это, и это ничего не изменило. Затем я попытался поставить «/» перед js. ‹script src=‹?php bloginfo('template_directory'); ?›/js/jquery-1.11.0.min.js› Это привело к тому, что изображение ничего не делало при нажатии. - person garydos34; 09.08.2014
comment
Ошибки в консоли есть? Путь к js-файлу правильный? - person Nico Martin; 09.08.2014
comment
Ладно, я понял! Вы были правы насчет ‹?php bloginfo('template_directory'); ?› для lightbox.js и jquery.js! Ссылки CSS, по-видимому, нуждались в '/' впереди. ‹link rel=stylesheet href=‹?php bloginfo('template_directory'); ?›/css/lightbox.css› - person garydos34; 09.08.2014
comment
Спасибо за помощь. Теперь я должен попытаться заставить это работать с моими пользовательскими полями. - person garydos34; 09.08.2014

arrow_upward
0
arrow_downward

Глядя на документацию Lightbox, упоминается, что вам нужно перечислять изображения таким образом.

Добавьте атрибут data-lightbox к любой ссылке на изображение, чтобы активировать Lightbox. В качестве значения атрибута используйте уникальное имя для каждого изображения. Например:

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