响应式PhotoSwipe与移动设备上的大控制

Responsive PhotoSwipe with large controls on mobile device

本文关键字：控制 PhotoSwipe 移动 响应      更新时间：2023-09-26

在这个官方代码中，在我的移动设备上控件和标题看起来非常小:http://codepen.io/dimsemenov/pen/ZYbPJM

我试着把这个添加到HTML中，但是没有任何区别:

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

我怎么能让他们更大，就像在photoswipe.com网站?

如果你的标记看起来像PhotoSwipe网站和CodePen建议的那样，你可以简单地在figcaption元素中添加任何你喜欢的HTML元素，如下所示:

<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: edit parseThumbnailElements函数来解析额外的标记元素，我为你链接它，看看如何用PhotoSwipe项目和这个精确的HTML标记构建一个响应式画廊网格，也用于你在你的问题中链接的CodePen

相关文章：