jquery fancybox做图片查看器

效果图

demo和js插件下载:https://www.lanzouq.com/iJ6gDxrujsh

操作

引入css

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" />

引入js

<script src="js/jquery.fancybox.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function (){
		$(".fancybox").fancybox();
	})
</script>

html代码,下面是引用了三个,查看一下子可以查看三张

<a class="fancybox"
   rel="group"
   href="images/1.jpg"
   data-fancybox="groupTwo"
   data-caption="图片描述1" style="width: 100px">
	<img src="images/1.jpg" style="width: 100px" />
</a>

<a class="fancybox"
   rel="group"
   href="images/2.jpg"
   data-fancybox="groupTwo"
   data-caption="图片描述2" style="width: 100px">
   <img src="images/2.jpg" style="width: 100px" />
</a>

<a class="fancybox"
   rel="group"
   href="images/3.jpg"
   data-fancybox="groupTwo"
   data-caption="图片描述3" style="width: 100px">
   <img src="images/3.jpg" style="width: 100px" />
</a>

如果不想一下子查看三张,就把class名称改一下

<a class="dierge"
   rel="group"
   href="images/3.jpg"
   data-fancybox="groupTwo"
   data-caption="图片描述3" style="width: 100px">
   <img src="images/3.jpg" style="width: 100px" />
</a>

<a class="dierge"
   rel="group"
   href="images/2.jpg"
   data-fancybox="groupTwo"
   data-caption="图片描述2" style="width: 100px">
   <img src="images/2.jpg" style="width: 100px" />
</a>

js在初始化一个

$(".dierge").fancybox();

其他参考:

https://blog.csdn.net/asing1elife/article/details/83044760?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.fixedcolumn&spm=1001.2101.3001.4242.1

https://blog.csdn.net/u011127019/article/details/118245191?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242.1

评论

  1. Tongyao 博主
    Windows Chrome
    1月前
    2021-12-16 16:37:57

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇