設計自己也設計別人

最近在架osCommerce，己經加裝了FancyBox的燈箱模組，但還想要讓燈箱可隨圖片大小縮放，所以就去改了一下程式。

效果還不錯！網站的美化、可用性及流暢度的優化是無止盡的呀……，還要加掛上傳圖片時，會產生縮圖的功能、以及要讓主圖下方的縮圖不變形的功能，但暫先做比較重要的功能就好了。

點圖另開視窗到官網看效果的範例哦！

    
可隨照片變換燈箱的大小哦。

  
尤實是圖文說明很多的時候，更好用啦！(點圖看範例)

**
再來就是提供修改的程式讓大家參考囉，發揮一下共享軟體的精神。

這段是要放在<script></script>裡面。

//將燈箱的超連結屬性去掉
$("div#fancy a").click(function(e) { 
	return false;
}); 

//點擊圖片時，捉取圖片的長寬，再另加20px，因為上下左右要留白。
$(".fancyimage").click(function() {
	img=document.createElement("img"); 
	img.src=this.href; 		
	$.fancybox({ 
		'width':img.width+20,
		'height':img.height+20,
		'padding': 10, //optional  
		'autoDimensions': false, 
		'content': '
<img　src="'+this.href+'" />
', 
		'onComplete': function() {
			$("#fancybox-inner").css({'overflow':'scroll'});
		}
	});
});  

以上。覺得有比較好的寫法，可以討論看看哦～

目前管理兩個 osCommerce 的網站：名片工房商店街跟T恤工房，歡迎參觀選購哦。