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

时间:2019-09-13
本文章向大家介绍JQuery - fancyBox 点选图片,放大图片显示,主要包括JQuery - fancyBox 点选图片,放大图片显示使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

摘要: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