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

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

osCommerce+FancyBox+可隨圖片大小變換燈箱

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

osCommerce+FancyBox+可隨圖片大小變換燈箱 osCommerce+FancyBox+可隨圖片大小變換燈箱  osCommerce+FancyBox+可隨圖片大小變換燈箱  
可隨照片變換燈箱的大小哦。

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恤工房,歡迎參觀選購哦。


jaichang2008 發表在 痞客邦 PIXNET 留言(0) 人氣()