首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

实现图片灯箱功能

写博客必不可少的一个功能就是图片灯箱功能,也就是点击放大查看。但是不同程序的博客所使用的插件也都不一样,我这里研究出一套可以满足绝大部分程序的灯箱插件。.../list/zoom.js"> 因为这个文件是放在我自己服务器上的,所以不敢保证以后还是这个路径,建议在浏览器打开,然后把里面的代码复制到本地使用。...post-content img').wrap('') /* smallimg // 小图 bigimg //点击放大的图片...mask //黑色遮罩 */ var obj = new zoom('mask', 'bigimg', 'smallimg'); obj.init(); }) 回到页面上,点击正文的图片就可以成功放大了...之所以我限制了在正文中才可以放大,是因为网站其他地方也有图片,如果都可以点击放大,就很不合理。 如果在使用中有其他问题,欢迎留言。

2.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    纯代码给你的网站增加图片灯箱效果,增强落地页体验

    灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化 我的检测结果是:您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地页体验 我们可以直接使用...是一款优秀的弹出框Jquery插件 1、允许我们用鼠标和键盘上的四个方向键切换图片 2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放 3、支持缩略图列表、放大...、全屏等功能 4、弹出框支持显示多种类型的内容:图片、html、视频… 5、支持触控、缩放手势操作图片 实现加入 FancyBox 灯箱效果教程 1、引入相关文件 可以将FancyBox的 js、css...jquery.fancybox.min.js"> 2、增加 data-fancybox 属性 这里分为两种情况,一种为之前插入图片的时候,添加过标签 即:【添加多媒体】→【上传图片或媒体库】→选中图片→点击...js、css 文件下面增加 $(document).ready(function() { $("[data-fancybox]").fancybox() }); 如果一切顺利,那么你的网站现在点击图片就可以看到图片灯箱效果

    6.9K40

    Typo3 CVE-2019-12747 反序列化漏洞分析

    TCA 在进行分析之前,我们需要了解下Typo3的TCA(Table Configuration Array),在Typo3的代码中,它表示为$GLOBALS['TCA']。...在Typo3中,TCA算是对于数据库表的定义的扩展,定义了哪些表可以在Typo3的后端可以被编辑,主要的功能有 表示表与表之间的关系 定义后端显示的字段和布局 验证字段的方式 这次漏洞的两个利用点分别出在了...而$this->overrideVals的值是在方法preInit中设定的,获取的是通过POST传入的表单中的键值对。 ? 这样一来,在这个请求过程中,进行反序列化的字符串我们就可以控制了。...page时,正常的表单中就携带doSave == 1,而doSave的值就是在方法preInit中获取的。...而TCA的验证又不严格导致了变量覆盖这个问题。

    2.6K30

    50个Axure画原型技巧,产品经理速学速用

    三、能提效的功能14、自适应文本大小在使用文字时,可能会出现元件尺寸大。想按照文字进行调整的情况,选中元件,在「样式」里,有 2 个小按钮,点击即可自适应文本高度、宽度。...15、同比例放大/缩小尺寸有 2 种方式:第1种:鼠标放在元件边缘的编辑点上,按住 Shift+鼠标左键拖,可以锁定长宽比来放大缩小元件。都2种:手动调节尺寸,将锁勾上,即可锁定长宽比。...也可以在「样式」中调整旋转角度。22、引用页面引用页面,元件引用页面后元件文案将会线上成页面的名称,点击元件可快速跳转到引用的页面。这个在画原型时的具体应用场景我没有找到。...第2种:使用「灯箱效果」,在设置显示时,更多选项选择「灯箱效果」。背景色选择黑色,不透明度设置成 50%。在设置显示时,推荐勾选“置于顶层”。注:当使用灯箱效果时,点击灰底区域,弹窗将会自动消失。...44、实现非模态的效果比如弹出气泡弹窗后,想实现点击弹窗外的区域关闭弹窗的效果。可以使用「显示/隐藏」,选择「灯箱效果」,背景颜色选择透明。

    17321

    免插件使用slimbox

    换上良心的主题一段时间了,这个loper自带了highslide的图片放大效果,用起来还是相当不错的,并且后台对效果的开关可以控制,还是挺方便的。...最近有空,看看了主题的源文件,一个highslide的JS文件就40K,就用一个图片灯箱,加载40K的JS文件,还没算上CSS文件,太不划算了,恰好看到Z大也发布了一个简洁的灯箱效果,试着改改去。...在header.php中填入以下代码: 1: 哦了,现在刷新下,看看你的图片效果有了没,有一点需要注意的就是需等待页面再入完成后再点击图片查看效果,不然你就会打开一张图片了。...本文由 空空裤兜 发布在 空空裤兜,转载此文请保持文章完整性,并请附上文章来源(空空裤兜)及本页链接。 如果本文侵犯您和第三方权益,请联系我及时删除。

    83220

    WordPress免费主题:Document,让阅读变得更加方便

    表格列 表格列 表格列 2.新增快捷下划线 这是下划线,这是下划线,这是下划线 2022-10-11更新 更新到2.0版本,风格不变,代码差不多都重构优化了一下,新增了很多实用的功能,后台截图如下(点击图片放大查看...文档,自适应,主题切换,阅读进度跟随 */ 1.文章目录导航 能够根据文章内容自动生成文章目录,虽然这个前端实现比较方便,但是考虑到需要seo所以直接在后端生成; 文章目录导航需要自动跟随阅读进度,点击文章目录导致自动跳转到对应的内容...图片灯箱 一级、二级、三级标题 作者信息卡片 文章信息卡片 评论区 最新文章 文章导航 文章底部赞赏 站点底部信息 导航栏菜单 导航栏搜索 上一篇、下一篇文章 一键回到顶部 主题色、阅读模式切换...增加后台设置,可设置主题的基本信息:关键词、主题描述、作者信息等; 增加编辑器插件:代码高亮、一级、二级、三级标题、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记 新增元标签:一级、二级、三级标题...、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记 自定义顶部菜单 404页面 搜索空结果页面 文章密码权限控制 20220617更新 修复窗口大小改变时,固定状态下的左右侧边栏位置没有同步变动,

    4.3K40

    Typecho简洁主题-Scarfskin开源

    她真的很适合一个对于多样性功能要求并不高而却想要很好看的个人博主,在图片的强烈装饰下,让仅仅有几篇内容的站点也显得如此美观。...我觉得在博客评论里面使用表情显得较为敷衍,有话说就评论没话说就不说,而不是用表情包来充数,所以我删除掉了泡泡和阿鲁表情包,这使得主题包更为小巧,当然,还有颜文字和Emoji表情供你选择。...自行选择 代码高亮,Mac样式代码高亮,多语言支持,自定义启用 文章顶部大图,极致美观的顶部大图展示,自定义启用 友情链接独立页面,无插件要求,后台可直接添加友链 归档页面,展示标签云及历史文章 图片灯箱...,文章内图片单击可放大,画廊般的体验 QQ评论头像,优先匹配QQ头像,已内置国内Gravatar随机头像源 防扒站,后台一键启用即可禁用F12和右键 返回顶部按钮和友情链接图标显示后台可控 自定义CSS

    64520

    全国首例候车亭AR广告:小S这样撩嗨众路人

    城会玩的爱奇艺在推广其“明星高食商网综“《姐姐好饿2》时,竟然把以鬼马精灵形象著称的节目主持人小S通过创新技术,请到了候车亭,路人们被这一突如其来的惊喜所吸引,纷纷围观拍照。 ?...在广告投放前,爱奇艺对候车亭进行了改造,通过AR技术把虚拟的小S带到街道上。通过实时计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术,将虚拟世界与现实世界结合。...在AR广告投放的同时,爱奇艺还配合常规灯箱发布,并且还选择一个超级品牌站进行创意投放,整体包装的同时,以投影的形式在公交站播放节目片花实现广告效果的最大化收割。 ?...而技术创新则让广告的毒性成几何倍数放大,用户在愉快的氛围中深度参与其中,实现了对品牌的强认知和强追随。

    72060

    twikoo评论块气泡风格魔改美化

    但是在尝试过程中,发现不论我如何推迟附加 class 的 js 执行时间,它永远早于 twikoo 评论加载。...自适应上考虑宽屏情况,在窄屏时沿用单边结构避免博主头像出框。 魔改正文 点击查看魔改正文 本方案仍为内测尝鲜版,目前测试无影响正常使用的 bug。请读者酌情使用。...考虑到气泡大小自适应文本内容的话,会出现博主评论气泡在最左边,而头像在最右边的情况,除非重写布局,不然光靠 relative 的定位难以处理所有宽度下的左右分布情况。所以最后就采用统一宽度了。...为 butterfly 主题的 twikoo 添加图片点击放大功能 洪哥 Acrylic 主题(即原 Butterfly-heo)定制版评论样式微调,与本文可兼容 Twikoo 魔改样式分享 - 博客评论系统的定制皮肤...调整评论区分割模块,设置分割线区分不同区间评论(待定,不是很符合气泡对话的风格) twikoo 评论块气泡风格魔改美化 https://akilar.top/posts/d99b5f01/

    1.4K20

    2019大前端dux6.0最新无限制版

    一系列文本高亮提示框和彩色文本框 功能 新增 博主自用的文章内容展开收缩效果 功能 新增 文章内外链和评论者链接添加 go 跳转 功能 新增 文章评论 VIP 等级功能 新增 集成 auto-highslide 灯箱插件功能...修复网址导航页面模版左侧菜单抖动问题 DUX主题5.4版本更新内容: 新增全站评论整体关闭选项,主题设置-基本中可设置 新增v2ex头像获取方式,删除多说方式,且可以在后台-设置-讨论中选择默认头像 调整底部友情链接选择只在首页显示时...,不在首页分页中显示 调整产品分类的写法以避免因分类过多导致的高度不够用 调整会员中心发布文章字数判断方式,更准确 修复熊掌号推送在新版编辑器下可能无法正常推送的问题 修改会员中心发布的文章为待审状态...修复网站开启ssl后弹窗登录有可能失败的问题 修复首页最新发布置顶文章可能出现的问题 修复会员中心文章列表标题过长可能错乱的问题 6.0版本更新内容: 新增文章图片暗箱功能:点击图片弹窗放大,可手势左右滑动切换...、双指操作放大缩小、双击放大、单击关闭弹窗,此功能仅在手机端有效,且仅在文章图片无链接时点击才会弹窗 新增archives页面模版中文章标题后 显示 副标题 调整首页轮换图效率更高,手机端手势滑动更加顺畅

    3.3K50

    HTML a 标签的 download 属性

    直接点击这个超链接一般浏览器会直接在窗口中打开这张图片(我这里是加了插件,所以是在图片灯箱中显示的) 那么,如果我想实现点击这个链接,直接弹出下载这张图片,该怎么做呢?...之前在做 MKOnlineMusicPlayer 的时候就遇到了类似的问题:为了实现音乐直接点击下载而不是在浏览器中打开,我的做法是用 PHP 在后台读取音乐文件,再加上 Content-Type: application...今天在“闲逛”之余无意间发现 a 标签居然有个 download 属性! 定义和用法 download 属性规定被下载的超链接目标。 在 a 标签中必须设置 href 属性。... 这下点击链接就能实现直接弹出下载了! 要是到这里结束就好了,然而…… 只有 Firefox 和 Chrome 支持 download 属性。

    1.8K20

    一款优雅简洁的轻论坛 - Flarum

    在我搜索轻论坛程序的时候,偶然间发现了更为漂亮简洁的 Flarum 。 关于 Flarum Flarum 是一款现代的,优雅的,简洁的,美观并且强大的论坛软件。它让在线交流变得更加轻松愉快。...虽然现在 Flarum 还是 Beta 版(已更新到 beta.16 ),但是相信在未来一定会推出正式版本! Flarum 官网没有中文版,因此国内衍生了不少 Flarum 中文网站。...4.Flarum 安装向导 填写完数据库信息、管理员信息,点击安装即可。 安装部署部分到此结束。...discuss.flarum.org.cn/d/2195 常用插件 简体中文语言包 编辑器 Emoji 表情选择框 导航栏菜单插件 显示帖子阅读次数 论坛用户名录 上传文件 Sitemap (网站地图)生成器 Fancybox 图片灯箱...(放大)插件 安装完成后去后台启用即可(后台地址:网址/admin)。

    1.9K10

    给网站添加PJAX无刷新

    在深入讨论PJAX之前,有必要先了解什么是AJAX及其扩展技术PJAX。AJAX(Asynchronous JavaScript and XML)是一种异步技术,旨在实现跨页操作而不需页面刷新。...它通过在页面刷新时添加历史记录功能(通常表现为左侧和右侧的 ← 和 → 按钮),允许用户通过按钮快速返回到之前的状态而不需重新加载页面。这种特性特别适合需要快速切换状态的应用场景,显著提升了交互体验。...在我这个案例中,main 是每次切换页面之后会产生内容变化的容器。而另外两个容器 header 和 footer 都是毫无变化的,这就无需编写了。...是不是非常简单呢?重载函数 如果你的页面内容需要配合 JS 实现一些特效(例:图片灯箱),你可能会发现刚打开页面时所执行的 JS 效果失效了。...如果你的服务器速度比较一般的话,用户可能无法察觉到链接点击之后发生的事情,可能会认为点击没有反应。 我们可以给网站添加一个加载动画,在 PJAX 开始的时候显示它,在完成的时候隐藏它。

    7400

    jQuery基础(五)一Ajax应用与常用插件-imooc

    2-1 表单验证插件——validate  2-2 表单插件——form  2-3 图片灯箱插件——lightBox  2-4 图片放大镜插件——jqzoom  2-5 cookie插件——cookie...}); }) }); var $this = $(this) this其实是一个HTML元素 this 只是个变量名,加" 而$...,点击“检测”按钮,调用post()方法向服务器以POST方式发送请求,检测输入值的奇偶性,并显示在页面中,如下图所示:      灯箱”的方式显示所选的图片,如下图所示: 图片放大镜插件——jqzoom 在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的...,options为插件方法的配置对象 例如,在页面中,添加一个被元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下图所示: cookie插件——cookie

    16.6K20

    New Kids On The Block (Part I) -Shodan BinaryEdge ZoomEye 网络空间搜索引擎测评

    例如去年出现的memcached DDoS 攻击,其放大率为10,000倍甚至更高。Shodan当天发布的第一份报告显示,大约有17,000个易受攻击的服务器在线,这很容易被防火墙列入黑名单。...我记得大约两三年前,曝出了一个针对Cisco产品的RCE漏洞——虽然Shodan的日点击量很高,但一周后,搜索结果几乎为空。 随着OSINT变得越来越重要,分析师可利用的搜索引擎工具也更加丰富。...1.1 Shodan Shodan在OSINT中几乎人尽皆知。它以标记和搜索各种不同设备(包括网络摄像头,工业控制系统和物联网设备)的能力而闻名。在那个“天呐!!物联网攻击!...Shodan的优点: l 因 API和许多模块以及语言集成而便于开发; l 许多东西可集成到其他软件系统中(例如:标签、保存的搜索结果等)。...RCECVE-2019-7238 5.500 200 9.100 2019-04-04 WebLogic RCECVE-2019-2725 2.000 84.000 40.000 2019-05-09 Typo3

    1.3K50
    领券