在移动设备上具有大型控件的自适应PhotoSwipe [英] Responsive PhotoSwipe with large controls on mobile device

问题描述

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

In this official codepen, on my mobile device the controls and caption look very small: http://codepen.io/dimsemenov/pen/ZYbPJM

我尝试将其添加到HTML中，但没有任何区别:

I tried adding this to the HTML but it didn't make any difference:

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

如何像在photoswipe.com网站上那样将它们放大?

How can I make them larger like in the photoswipe.com site?

推荐答案

如果您的标记看起来像在PhotoSwipe网站上建议的那样，并且该CodePen您可以简单地在figcaption元素中添加所需的任何HTML元素，如下所示:

If your markup looks like suggested on the PhotoSwipe website and that CodePen you can simply add any HTML elements you like in the figcaption element like so:

<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设置标题样式，例如:

and then use following CSS to style the caption for example:

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

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

.dimensions {
    font-size: 1em;
}

.technique {
    font-size: 0.8em;
}

然后，例如，如果您对默认值不满意，还可以将媒体查询添加到手机和平板电脑的标题的样式类中.

Then you can also add media-queries to the style classes of the caption for mobile and tablet for example if you are not happy with the default values.

@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

Remember to include all JS and CSS files like shown here:
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项以及您在问题中链接的CodePen中也使用的确切HTML标记来构建响应式画廊网格.

I also came across this question PhotoSwipe: edit parseThumbnailElements function to parse additional markup element and am linking it for you to see how one can build a responsive gallery grid with the PhotoSwipe items and this exact HTML markup that is also used in the CodePen you linked in your question.

这篇关于在移动设备上具有大型控件的自适应PhotoSwipe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！