Отзывчивый PhotoSwipe с большими элементами управления на мобильном устройстве

В этом официальном codepen на моем мобильном устройстве элементы управления и заголовок выглядят очень маленькими: http://codepen.io/dimsemenov/pen/ZYbPJM

Я попытался добавить это в HTML, но это не имело никакого значения:

    <meta name="viewport" content="width = device-width, initial-scale = 1.0">

Как сделать их больше, как на сайте photoswipe.com?


javascript jquery photoswipe
person John Kornick    schedule 13.09.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Если ваша разметка выглядит так, как предложено на веб-сайте PhotoSwipe и в этом CodePen, вы можете просто добавить любые HTML-элементы, которые вам нравятся, в элемент figcaption следующим образом:

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1202">
            <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
            <figcaption itemprop="caption img-description">
            <div class="index">
                <div class="img-title">
                    Title of the image or photo
                </div>
                <div class="img-year">
                    2003
                </div>
                <div class="dimensions">
                    1200 x 900 cm
                </div>
                <div class="technique">
                    Oil on cotton
                </div>
            </div>
            </figcaption>
    </figure>

а затем используйте следующий CSS для оформления подписи, например:

.img-title {
    font-size: 2em;
}

.img-year {
    font-size: 1.2em;
}

.dimensions {
    font-size: 1em;
}

.technique {
    font-size: 0.8em;
}

Затем вы также можете добавить медиа-запросы к классам стилей подписи для мобильных устройств и планшетов, например, если вас не устраивают значения по умолчанию.

@media screen and (min-width:0px) {
    .img-title {
        font-size: 2em;
    }

    .img-year {
        font-size: 1.2em;
    }

    .dimensions {
        font-size: 1em;
    }

    .technique {
        font-size: 0.8em;
    }              
}


@media screen and (min-width:320px) {
    .img-title {
        font-size: 4em;
    }

    .img-year {
        font-size: 2.2em;
    }

    .dimensions {
        font-size: 1.5em;
    }

    .technique {
        font-size: 1.1em;
    }              
}

Не забудьте включить все файлы JS и CSS, как показано здесь:
http://photoswipe.com/documentation/getting-started.html

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script>

Я также столкнулся с этим вопросом PhotoSwipe: отредактируйте функцию parseThumbnailElements для анализа дополнительных элемент разметки, и я связываю его, чтобы вы увидели, как можно создать адаптивную сетку галереи с элементами PhotoSwipe и этой точной разметкой HTML, которая также используется в CodePen, на который вы ссылались в своем вопросе.

person moderntimes    schedule 10.11.2015