JQuery - fancyBox 点选图片，放大图片显示

Posted 2022-10-24 petewell

摘要:JQuery - fancyBox 点选图片，放大图片显示

好久没写文章了，

没工作的情况下，实在没什么实战经验可以提供，

还好，会有一些意外的小Case，

刚好我没做过，赚一点小小外块，好让贫穷的我，还能撑个一、两个礼拜（哭哭）

------------

这次帮一位朋友的哥哥，因为非本业出身，要弄一个网页，因为要内容数字化，拍了一堆照片，要用网页显示，

好久没碰前端，应该说是javascript、html、CSS、JQuery的我，

实在记性不是很好，一直狂用Google，东凑西凑，在四个小时内完成了（没想到这样做好像也挺快的，四个小时就赚两天的薪水，对方说至少给我这样的薪水，喔，因为外面报价不知道为什么异常的高）

给了对方程序，对方给予很多的感谢，觉得我做很快，外面接案的人不但说要架服务器呀，要多少钱，结果他只要静态网页，刚好我不太会架服务器，我写静态网页还可以说，接的很愉快，省了他两天的时间（他可能不知道怎么做，可能会花更久的时间）

由其我用的是JQuery这种技术，用DW不知道能不能做得到。

而且我用JavvaScript+JQuery+Json处理，让程序自动加入DOM组件或Element，如果用DW，不知道他是否会花250次的Ctrl+C , Ctrl +V。

因为图片有259张，且每张图片都266KB，我就使用大量缩图软件，将每张图缩到宽200px，每张瞬间变成35KB。

就能在同一个页面全部显示。

http://briian.com/6561/easy-image-modifier.html

再使用javascript array ，另外引用data.js，让每张图的文字能够镜像。

再使用JQuery 套件 ，?fancyBox ，处理点选放大。

http://fancyapps.com/fancybox/

好久没做网页了，语法忘的差不多，重新回忆。

有哪些我用到的CSS

display:inline;

float:left;

font-family: "标楷体","Times New Roman", Georgia, Serif;

font-weight: bold;

clear:both;?

text-align: center;

display:none

回忆一下JSON 如何使用

indexs[1] = start:1,end:2,category:"";

回忆一下JQuery如何使用

var $data = $("#data1").clone();

$data.children("img" ).attr("alt",datas[i]);

$data.appendTo($("#div_list"));

点选跳出的范例

						$data.fancybox(
							helpers: 
								title : 
									type : ‘outside‘
								,
								overlay : 
									speedOut : 0
								
							
						);		

内嵌连结的使用

Tab1

Title1

图片的范例

如果我写过的话……

或许只要一小时内就弄好。

不过太久没弄，就这样弄了四小时（哭哭，幸好给的钱好多……对我来讲）

原文:大专栏  JQuery - fancyBox 点选图片，放大图片显示