zoukankan      html  css  js  c++  java
  • 博客添加图片查看器

    在阅读博文时,对图片的放大查看是一种普遍的需求,而fancybox就是这样一种插件,配置方法十分简单。

    引入js和css

    页脚插入代码

    <script type="text/javascript" src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.css">
    

    指定fancybox作用的区域

    在页脚插入这样一段代码

    <script>
    $(".forFlow img").each(function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "gallery");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
    });
    </script>
    

    上述代码将指定区域内的图片添加了父元素,从而使得当点击图片时,触发fancybox查看器。

    样式微调

    fancybox在手机端默认最大图片宽度为300px,没有居中,这里在CSS中添加一段代码

    .fancybox-image{
    max-100%!important;
    margin:0 auto;
    }
    

    效果预览


    非常不错的查看器,支持图片队列,支持放大缩小!

  • 相关阅读:
    一分钟应对勒索病毒WannaCry
    你不知道网络安全有多严峻
    MongoDB 文章目录
    SQL Server 文章目录
    MySQL 文章目录
    领域驱动(DD)目录
    Oracle基本教程
    系统架构研究目录
    设计原则目录
    开源项目学习历程
  • 原文地址:https://www.cnblogs.com/gshang/p/12488289.html
Copyright © 2011-2022 走看看