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. Identity 4 -1创建一个登录中心

    准备知识 官网地址:https://identityserver4.readthedocs.io/ 通过nuget安装 Identity Server4

  2. 06hive企业调优

    一.Fetch抓取 Fetch抓取是指,Hive 中对某些情况的查询可以不必使用MapReduce计算. 在 hive-default.xml.template 文件中 hive.fetch.task ...

  3. ContractPattern 面向面向契约模式

  4. NOIP【2016普及组】 考后有感（买铅笔，回文日期，海港，魔法阵）

    普及组考试已落下大幕,但我们那扑通扑通等待成绩的心仍然无法平静,先来给四道题做一个总结: 一. 买铅笔 自评难度:1星 其实这道题没有什么难度,生命之题,满分必拿,100分,保底啦~\(≧▽≦)/~ ...

  5. re模块的使用

    re模块下的函数 compile(pattern):创建模式对象 import re pat = re.compile('D') m = pat.search('CBA') #等价于re.search ...

  6. Shoot the Bullet(有源汇带上下界最大流)

    有源汇带上下界最大流 在原图基础上连一条汇点到源点流量为inf的边,将有源汇网络流转化为无源汇网络流用相同方法判断是否满流,如果满流再跑一边源点到汇点的最大流就是答案 例题:Shoot the Bul ...

  7. Linux 6种日志查看方法，不会看日志会被鄙视的

    作为一名后端程序员,和Linux打交道的地方很多,不会看Linux日志,非常容易受到来自同事和面试官的嘲讽,所以掌握一种或者几种查看日志的方法非常重要. Linux查看日志的命令有多种: tail.c ...

  8. 痞子衡嵌入式：嵌入式里堆栈原理及其纯C实现

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里堆栈原理及其纯C实现. 今天给大家分享的这篇还是2016年之前痞子衡写的技术文档,花了点时间重新编排了一下格式.栈这种结构在嵌入式 ...

  9. 20190710双人开黑CF模拟赛

    Codeforces Round #571 (Div. 2) 日常被tanao_大佬带飞,我AC了A和C(B题没了...否则tanao_大佬肯定把我吊打) A. Vus the Cossack and ...

  10. 【编程的乐趣-用python解算法谜题系列】谜题一 保持一致

    谜题一 保持一致 谜题 假设有一大群人排队等待观看棒球比赛.他们都是主场球迷,每个人都戴着队帽,但不是所有人都用同一种戴法,有些人正着戴,有些人反着戴. 假定你是保安,只有在全组球迷帽子戴法一致时才能 ...