photosWide 小白实例demo 实现图片在移动端和PC端缩放可直接替换使用

最新推荐文章于 2021-08-04 02:20:53 发布

Ada wong

最新推荐文章于 2021-08-04 02:20:53 发布

阅读量968

点赞数

分类专栏：笔记文章标签： http sublime text

本文链接：https://blog.csdn.net/sugarbew/article/details/115477815

版权

photoswide
在这里插入图片描述
帮你们打包蓝奏云：
Dijia

<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#" debug="true"
      class="wf-myriadpro-n4-active wf-myriadpro-n6-active wf-active">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Dijah,ティガ</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0">
    <meta name="author" content="Dijah">
</head>
<body>

<!--自定义图片 Dijia/1.jpg-->
<div class="section section--head">
    <!--自定义图片 Dijia/1.jpg-->
    <div class="row">
        <div id="demo-test-gallery" class="demo-gallery" data-pswp-uid="1">

            <a href="Dijia/1.jpg"
               data-size="1600x1600" data-med="Dijia/1.jpg"
               data-med-size="1024x1024"
               class="Dijia/1.jpg">
                <img src="Dijia/1.jpg" alt="">
                <figure>光</figure>

            </a><a href="Dijia/2.jpg"
                   data-size="1600x1600" data-med="Dijia/2.jpg"
                   data-med-size="1024x1024"
                   class="Dijia/2.jpg">
            <img src="Dijia/2.jpg" alt="">
            <figure>光</figure>
        </a>
        </div>
    </div>
</div>


<!--各种属性和链接可不看-->
<div>
    <link href="./Dijia/site.css" rel="stylesheet">
    <link href="./Dijia/photoswipe.css" rel="stylesheet">
    <link href="./Dijia/default-skin.css" rel="stylesheet">
    <script type="text/javascript" async=""
            src="./Dijia/watch.js"></script>
    <script async="" src="./Dijia/analytics.js"></script>
    <script src="./Dijia/photoswipe.min.js"></script>
    <script src="./Dijia/photoswipe-ui-default.min.js"></script>
    <script src="Dijia/snf1yod.js"></script>
    <style type="text/css">.tk-myriad-pro {
    
        font-family: "myriad-pro", sans-serif;
    }</style>
    <style type="text/css">@font-face {
    
        font-family: myriad-pro;
        src: url(https://use.typekit.net/af/9bffeb/0000000000000000000151e0/23/l?subset_id=2&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/9bffeb/0000000000000000000151e0/23/d?subset_id=2&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/9bffeb/0000000000000000000151e0/23/a?subset_id=2&fvd=n4&v=3) format("opentype");
        font-weight: 400;
        font-style: normal;
        font-display: auto;
    }
    @font-face {
    
        font-family: myriad-pro;
        src: url(https://use.typekit.net/af/5e21d4/0000000000000000000151e1/23/l?subset_id=2&fvd=n6&v=3) format("woff2"), url(https://use.typekit.net/af/5e21d4/0000000000000000000151e1/23/d?subset_id=2&fvd=n6&v=3) format("woff"), url(https://use.typekit.net/af/5e21d4/0000000000000000000151e1/23/a?subset_id=2&fvd=n6&v=3) format("opentype");
        font-weight: 600;
        font-style: normal;
        font-display: auto;
    }</style>
    <script>
        $(function () {
    
            $('.pswp__img').css("width", "34%").css("height", "86%");

        })
        try {
    
            Typekit.load();
        } catch (e) {
    
        }</script>
    <script>
        document.createElement('figure');
    </script>
    <style type="text/css">
        input[type="text"],
        input[type="email"] {
    
            font-size: 18px;
            line-height: 25px;
            height: 32px;
            width: 250px;
            border: 1px #d0d0d0 solid;
            margin: 0 0 10px 0;
            padding: 4px

最低0.47元/天解锁文章

Ada wong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
photosWide 小白实例demo 实现图片在移动端和PC端缩放可直接替换使用

photoswide<!DOCTYPE html><html lang="en" prefix="og: https://ogp.me/ns#" debug="true" class="wf-myriadpro-n4-active wf-myriadpro-n6-active wf-active"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-
复制链接

扫一扫