Как построить массив слайдов из списка ссылок

Я смотрю на новый скрипт для фотосвайпа от @dimsemenov. Раньше я использовал magnific popup, написанный тем же автором. Метод Magnific popup для создания галереи элементов был немного проще. Вместо того, чтобы иметь элемент контейнера с классом my-gallery, вы просто добавили класс к каждой ссылке на изображение, а затем включили галерею в js.

Вот так:

HTML:

<a href="<?php echo $image_src; ?>" title="<?php echo $image_alt; ?>" data-mfp-src="<?php echo $image_src; ?>" class="image-link"><img src="<?php echo $image_src; ?>" alt="<?php echo $image_alt; ?>"></a>

JS:

$('.image-link').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        gallery: {
            enabled: true
        },
        etc

Я предпочитаю этот метод, потому что он позволяет включать ссылки из любого места на странице. Например. изображение в заголовке страницы может быть первым изображением в галерее, а щелчок «Далее» приведет вас к изображению в нижнем колонтитуле. Контейнер не нужен.

Каким будет лучший способ добавить список ссылок без контейнера? Таким образом, я мог переключиться с Magnific на PhotoSwipe, сохранив более или менее ту же структуру HTML.

PS: я почти уверен, что пример разметки на http://photoswipe.com/documentation/getting-started.html является "неправильным" (несемантичным). элемент img должен быть внутри элемента figure, а также должен быть элемент figcaption. Итак, это:

<a href="path/to/image1.jpg" data-size="1600x1600">
    <img src="path/to/thumbnail-image1.jpg" />
    <figure>This is dummy caption 1.</figure>
</a>

должно быть:

<a href="path/to/image1.jpg" data-size="1600x1600">
    <figure>
        <img src="path/to/thumbnail-image1.jpg" />
        <figcaption>This is dummy caption 1.</figcaption>
    </figure>
</a>

or

<figure>
    <a href="path/to/image1.jpg" data-size="1600x1600">
        <img src="path/to/thumbnail-image1.jpg" />
        <figcaption>This is dummy caption 1.</figcaption>
    </a>
</figure>

javascript photoswipe
person patrickzdb    schedule 11.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Документация была обновлена ​​для поддержки семантической разметки с Schema.org http://photoswipe.com/documentation/getting-started.html

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>

    <figure itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>


</div>
person Dmitry Semenov    schedule 11.12.2014