JQuery - fancyBox 點選圖片,放大圖片顯示

  • 6410
  • 0

摘要: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
								}
							}
						});		

 

 
內嵌連結的使用
 
<a class="link" href="#link1">Tab1</a>
 
<a name="link1"></a>Title1
 
圖片的範例
 
			<a id="data1" class="img_item" href="" title="">
				<img src="" alt="" />
			</a>

 

如果我寫過的話……

或許只要一小時內就弄好。

不過太久沒弄,就這樣弄了四小時(哭哭,幸好給的錢好多……對我來講)