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. poj-1753题题解思路

    今天天气很好! 首先题意是这样的:: 翻盖游戏是在一个长方形的4x4场上进行的,其16个方格中的每一个都放置了双面的棋子.每一块的一边是白色的,另一边是黑色的,每一块都是躺着的,要么是黑色的,要么是白 ...

  2. python3操作PyMySQL笔记

    python3操作mysql需要先安装PyMySQL pip install PyMySQL 在linux登录mysql ,并且在安装数据库时设置了数据库的用户名“root”和密码“root”,mys ...

  3. AVLtree（C++实现）有统一的旋转操作

    在学习完AVLtree之后,我发现,左旋,右旋均可以采用统一的旋转方式来实现,所以把代码贴在下面 代码是完整的AVLTree实现 C++标准为C++11 在ubuntu 18.04下通过编译和调试 / ...

  4. 前端 network

    控制台 :https://blog.csdn.net/m0_37724356/article/details/79884006 原文链接:https://segmentfault.com/a/1190 ...

  5. vscode打开文件，中文显示乱码（已解决）

    之前使用vscode打开keil的文件后,发现显示乱码,网上查找资料发现大多是这种方法:将files.autoGuessEncoding改为true,但是并没有用. 发现第二种方法为:在vscode中 ...

  6. IDEA | 识别不出自建webapp文件夹

    背景: 今天自建了一个webapp文件夹,发现idea识别不出来是web应用的资源文件夹 解决方案 打开project structure配置,如下图

  7. OpenResty学习指南（二）

    我的个人博客:https://www.luozhiyun.com/ 数据结构table table并没有区分开数组.哈希.集合等概念,而是揉在了一起. local color = {first = & ...

  8. nginx适用哪些场景

    1.静态资源服务 通过本地文件系统提供服务 2.反向代理服务 ningx的强大性能 缓存 负载均衡 3.API服务 openresty

  9. 读取sysTreeview32和SysListView32

    #include <stdio.h> #include <windows.h> #include <commctrl.h> int main(void) { /* ...

  10. 洛谷P3177 [HAOI2015]树上染色（树形dp）

    题目描述 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你会获得黑点两两之 ...