關於部落格
「 相本、程式....Not worth a rap 。」
  • 16696

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

關於產品放大圖(lightbox)

1.先在www底下建立一個名為js的新資料夾,其實可建可不建主要是想分開別類下去會比較好管理內容檔案,總之,路徑寫對最重要!

2.把下載回來的js檔案全都丟上去

3.開啟下載回來的檔案內附的lightbox.css把css內容整個copy
貼到檔案路徑www/stylesheet.css底下,這是避免太多支css很麻煩
如果不整合也行,product_info.php的<head>加入的那幾段,css路徑就要改哦!

4.在www/images下建立新資料夾lightbox(這是為了方便管理圖片),接著把lightbox資料夾裡的images全部丟上去 

a. 開啟www/stylesheet.css
找到宣告lightbox的地方
改圖片路徑為 
/images/lightbox/

b.開啟www/js/lightbox.js
改成下列: 
var fileLoadingImage = "images/lightbox/loading.gif";      
var fileBottomNavCloseImage = "images/lightbox/closelabel.gif";



4.接著就照下面的:[/color]
檔案路徑:
www/product_info.php
以下所有程式碼記得把s c r ipt 跟 j ava sc ript中間的空格拿掉
先在<head></head>找個空位把以下的js碼插入,我是直接貼在</head>的前面 

接著找到以下:

改成下面這個:

這一段是產品的主要圖片(第一張)

這段是擴增圖片 

在www/includes/filenames.php裡找到FILENAME_ADDITIONAL_IMAGES
對應檔案為www/includes/modules/additional_images.php 就是擴增圖片的檔案啦!


找到以下,就是要修改的內容:

改成下面這樣,就大功告成囉!還有多圖顯示呢!



Lightbox 在OSCcommerce論壇
相簿設定
標籤設定
相簿狀態