Galleria JQuery вопрос настройки плагинов - PullRequest
Новая
       11

Galleria JQuery вопрос настройки плагинов

0 голосов
/ 01 июля 2011

Я пытаюсь настроить плагин Galleria jQuery, чтобы обеспечить расширенные заголовки, используя функцию dataConfig, как подробно здесь . Основной код для галереи выглядит следующим образом: 

<div id="galleria">
    <ul>
        <li>
            <img src="myimg.jpg">
            <h2>Lorem ipsum title</h2>
            <div class="desc">You can add <strong>strong</strong> tags or any other HTML as caption</div>
        </li>
    </ul>
</div>

<script>
    $('#galleria').galleria({
        dataConfig: function(img) {
            return {
                title: $(img).next('h2').html(), // tell Galleria to use the h2 as title
                description: $(img).siblings(.desc).html() // tell Galleria to grab the content from the .desc div as caption
            };
        }
    });
</script>

У меня возникает проблема, если я оберну тег img в привязке, как показано ниже - 

<li>
    <a href="full-size.jpg"><img src="myimg.jpg"></a>
    <h2>Lorem ipsum title</h2>
    <div class="desc">You can add <strong>strong</strong> tags or any other HTML as caption</div>
 </li>

- чтобы обеспечить постепенную деградацию, если JS отключен - ссылки "title" и "description" в функции dataConfig больше не работают, так как я понимаю, что jQuery ищет классы H2 и "desc" сразу после тег img, и размещение его внутри якоря, кажется, нарушает ссылку при вводе, то есть через (img) .next и (img) .siblings. Поэтому мой вопрос заключается в том, как я могу изменить эти ссылки jQuery для заголовка и описания для работы с изображением, которое находится внутри тега привязки. Я понимаю, что могу просто поставить якорь вокруг всего блока - т.е. img, h2 и div "desc" - который, я считаю, теперь технически разрешен в спецификации HTML5, и он будет продолжать работать в том виде, в котором он был введен, но я бы предпочел только обернуть img.

Полагаю, это более простой вопрос jQuery, чем что-либо еще; Большое спасибо за любую помощь здесь.

1 Ответ

1 голос
/ 01 июля 2011

Предполагается, что у вас есть один LI для каждого предмета: 

$('#galleria').galleria({
    dataConfig: function(img) {
        var block = $(img).closest('li'); // find the parent
        return {
            title: block.children('h2').html(),
            description: block.children('.desc').html()
        };
    }
});
...