摘要: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 点选图片，放大图片显示
原文地址：https://www.cnblogs.com/petewell/p/11516487.html