несвязанные изображения freatherlight

У меня проблемы с перламутром, по какой-то причине он не будет работать, я использую Ghost в качестве платформы, и у меня есть несколько изображений, добавленных в пост с использованием уценки Ghost, для работы перламутра мне нужна ссылка на эти изображения с классом чтобы связать их как перышко, поэтому я использую следующий jQuery

    $(document).ready(function() {
    $("img").each(function() {
        var $this = $(this);
        var src = $this.attr('src');
        var a = $('<a/>').attr('href', src).addClass('lightbox');
        $this.wrap(a);
        });
    });

и зовет пухом

    $("a.lightbox").featherlight({
        closeOnClick: 'anywhere',
    });

Я смотрю на своего инспектора в Chrome, и у меня нет ошибок, а изображения прекрасно завернуты в теги с правильным классом:

<a href="/content/images/2015/05/IMG_0150.jpg" class="lightbox">
    <img src="/content/images/2015/05/IMG_0150.jpg" alt="Beautiful Girls">
</a>

Я заметил одну вещь: сразу после тега я получаю класс span для каждого изображения в сообщении.

<span class="overlayContainer" style="top: 1603px; left: 1108.5px;"></span>

Я очень новичок в JS и jQuery, поэтому это может быть очень простое решение.


javascript ghost-blog featherlight.js
person philberndt    schedule 07.05.2015    source источник
comment
вот копипаста источника pastebin.com/GDirpYGL   -  person philberndt    schedule 08.05.2015
comment
поместите свой блок $("a.lightbox").featherlight({closeOnClick: 'anywhere',}); внутрь $(document).ready(function(){});. Также удалите лишнюю запятую после 'anywhere',.   -  person Ejaz    schedule 08.05.2015
comment
Вы можете проверить noelboss.github.io/featherlight/gallery.html   -  person jcuenod    schedule 08.05.2015
comment
@jcuenod У меня есть, но, поскольку у меня были проблемы с реализацией только Lightbox, я удалил его, чтобы свести к минимуму точки отказа, но это действительно будет добавлено. :) Благодарность   -  person philberndt    schedule 08.05.2015

Ответы (1)


arrow_upward
4
arrow_downward

поместите свой блок $("a.lightbox").featherlight({closeOnClick: 'anywhere',}); внутрь $(document).ready(function(){/* ... */});. Также удалите лишнюю запятую после 'anywhere',

Ваш код становится

$(document).ready(function() {
    $("img").each(function() {
        var $this = $(this);
        var src = $this.attr('src');
        var a = $('<a/>').attr('href', src).addClass('lightbox');
        $this.wrap(a);
    });

    $("a.lightbox").featherlight({
        closeOnClick: 'anywhere'
    });
});
person Ejaz    schedule 07.05.2015
comment
Удаление завершающей запятой не требуется. Это недопустимо для JSON, но это не проблема для js. - person jcuenod; 08.05.2015
comment
Исправьте или привяжите document и используйте вариант filter. - person Marc-André Lafortune; 08.05.2015
comment
@Ejay Я получаю: Uncaught TypeError: $(...).featherlight is not a function (anonymous function) @ (index):162 - person philberndt; 08.05.2015
comment
убедитесь, что вы добавили библиотеку перламутрового света перед этим кодом. Также проверьте вывод console.log($("a.lightbox")); перед применением feathelight. Он должен перечислять элементы. - person Ejaz; 08.05.2015
comment
@Ejay та же ошибка, вывод консоли возвращает ожидаемый вывод <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdn.rawgit.com/noelboss/featherlight/1.2.3/release/featherlight.min.js"><‌​/script> <script> code from above </script> вот как выглядит мой исходный код. - person philberndt; 08.05.2015
comment
Хорошо, я должен был позвонить <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> специально. теперь работает как шарм - person philberndt; 08.05.2015