fancybox图片灯箱功能

在页面中引入几个文件

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

在博客文件中需要加载图片的地方插入下面html代码

<a data-fancybox="gallery" href="图片链接"><img src="图片链接"></a>

<a data-fancybox="gallery" href="图片链接"><img src="图片链接"></a>

效果:

fancybox图片灯箱功能的更多相关文章

  1. iOS开发UI篇—UIScrollView控件实现图片缩放功能

    iOS开发UI篇—UIScrollView控件实现图片缩放功能 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对 ...

  2. C# 图片盖章功能实现，支持拖拽-旋转-放缩-保存

    实现图片盖章功能,在图片上点击,增加“图章”小图片,可以拖拽“图章”到任意位置,也可以点击图章右下角园框,令图片跟着鼠标旋转和放缩. 操作方法:1.点击增加“图章”2.选中移动图标3.点中右下角放缩旋 ...

  3. 杂谈SharpDx中的WIC组件——我们需要WIC的图片编码功能么？

    在前文 SharpDX之Direct2D教程II——加载位图文件和保存位图文件 中,发现在VB2010中不能很好的运用SharpDx中的WIC组件进行图片的编码工作.可能是我的设置问题,也可能是Sha ...

  4. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  5. 纯JS实现图片验证码功能并兼容IE6-8

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...

  6. 图片放大功能如何做？jquery实现

    花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...

  7. Android Camera开发系列（下）——自定义Camera实现拍照查看图片等功能

    Android Camera开发系列(下)--自定义Camera实现拍照查看图片等功能 Android Camera开发系列(上)--Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片 上 ...

  8. DDGScreenShot—图片擦除功能

    写在前面 图片擦除功能,也是运用图片的绘制功能, 将图片绘制后,拿到相应的图片.当然,有一涨底图更明显 实现代码如下 /** ** 用手势擦除图片 - imageView --传图片 - bgView ...

  9. jQuery图片灯箱和视频灯箱

    在一些前端页面中经常需要文件上传,为了美观,我们经常做一个灯箱来显示我们选择的文件, 而不是简单的input标签. html 代码:这个是多图片上传 <div class="layui ...

随机推荐

  1. 个人任务day6

    今日计划: 学会将网页放到公用网络上,并生成快捷方式. 昨日成果:完成登录页面.

  2. [新详细]让Keil5续签到2032年的办法，不可商用

    # 使用方法和以前的版本一样,MDK 或者C51等均适用,供学习与参考.更多需要到这里购买→ → Keil官网:[http://www.keil.com/](http://www.keil.com/) ...

  3. 并查集——奇偶性（Parity）

    题目描述 •有一个01序列,长度<=1000000000,现在有n条信息,每条信息的形式是-a b even/odd.表示第a位到第b位元素之间的元素总和是偶数/奇数. •你的任务是对于这些给定 ...

  4. Linux网络文件共享服务之smaba

    一.SAMBA服务简介 samba是1991年由Andrew Tridgel开发实现,主要用于Windows和unix文件共享.samba实现了共享文件和打印,实现在线编辑,登录SAMBA用户的身份认 ...

  5. Java容器解析系列(16) android内存优化之SparseArray

    HashMap的缺点: 自动装箱导致的性能损失; 使用拉链法来解决hash冲突,如果hash冲突较多,需要遍历链表,导致性能下降,在Java 8 中,如果链表长度>8,会使用红黑树来代替链表; ...

  6. robotframework，移动端（小程序）自动化，滚动屏幕的方法

    场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...

  7. NVIDIA DRIVE

      NVIDIA 驱动安装(超详细) ref1: https://blog.csdn.net/qlulibin/article/details/78714596 ref2:https://www.cn ...

  8. canvas跨域完美解决，微信头像解决跨域

    现在前端技术发展的越来越快,很多图片合成这种耗费服务器性能的,都可以移动到前端进行了合成了.而且合成很方便,我们利用 canvas 可以实现好多东西. 自动打算利用前端来合成图片,在网上就找到了 ht ...

  9. Centos 7 最小化部署zabbix

    前言 文章内容是作者本人编写,之前一直放在word文档中,突然有闲情转移到博客上来了,欢迎后续观看者有问题找我探讨~~~ 废话不多说,先说下原理吧 概述 工作原理 通过c/s模式采集数据,基于b/s模 ...

  10. Linux学习笔记-centos查看版本号和内核信息

    1.查看centos系统版本号: 打开终端窗口: cat /etc/redhat-release 2.查看Linux内核版本信息: uname -a 或者 在图形化桌面右上角点开设置,在设置窗口选择详 ...