問題討論區


【Dreamweaver 網頁設計】文章精華區


【分享】 很棒的~光箱特效「 Lightbox 」



很棒的~光箱特效「 Lightbox 」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
很棒的~光箱特效「 Lightbox2 」

原作者網站的展示 http://www.lokeshdhakar.com/projects/lightbox2/

範例原始檔下載 http://www.lokeshdhakar.com/projects/ ... releases/lightbox2.04.zip


下載解壓後,可以看到三個資料夾和一個index.html教學的網頁
Open in new window



先將那三個資料夾複製一份到我們要製作的網頁旁邊~


再打開「index.html教學的網頁」將三段 javascript 程式複製到我們的頁面上
Open in new window



還有一段 css 也要複製到我們的網頁上
Open in new window



最後把圖片連結中的參數再複製起來~ 貼到我們做的網頁的圖片的連結語法上~ 就大功告成啦!

Open in new window




我們測試的結果預覽 http://www.flycan.com/swf_upload/fly_box/fly_pages.html

我們測試的範例下載 http://www.flycan.com/swf_upload/fly_box/flybox.zip

2008/11/1 2:47
 


回覆: 很棒的~光箱特效「 Lightbox2 」
會員二級
註冊日期:
2008/3/21 16:16
留言: 10
Hi 姜老師~
很棒的特效...值得推一下喔!

but 這裡有點小問題.
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

我的prev.gif and next.gif 都可以正常的跑出來. 然後close.gif / lodaing.gif 跑不出來.
請問要怎麼改 lightbox.js ?

c:\xxx\images <- lodaing.gif 放在這裡
c:\xxx\js
c:\xxx\css
跟原始設定都一樣.

c:\xxx\photo.html <- 全部的圖片都沒問題,都跑的出來.
c:\xxx\test\photo.html <- loading.gif / close.gif 跑不出來, prev / next 沒問題!

請問是要在 lightbox.js
// -----------------------------------------------------------------------------------

//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: './images/loading.gif',
fileBottomNavCloseImage: './images/closelabel.gif',

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});

請問要怎麼修正呢?

萬分感謝!~~~

2008/11/7 14:50
 


回覆: 回覆: 很棒的~光箱特效「 Lightbox2 」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
你把他內附的 3 個資料夾全部放到你的 test 資料夾內試試看~

2008/11/7 21:11
 


回覆: 回覆: 回覆: 很棒的~光箱特效「 Lightbox2 」
會員二級
註冊日期:
2008/3/21 16:16
留言: 10

【姜】 寫道:
你把他內附的 3 個資料夾全部放到你的 test 資料夾內試試看~

當然, 其實把 images/ 裡的那幾個files放到 test 資料夾內可以!

但如果有 test1 - test 100 個目錄...那怎麼辦?

http://www.lokeshdhakar.com/projects/lightbox2/
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

原本網頁中有提到 Loading.gif / close.gif 應該是在 lightbox.js 這個檔案裡設定
原本的設定應該是文件相對位子.

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

==========================================================================================
我直接用
fileLoadingImage: 'http://xxx.com.tw/images/loading.gif',
fileBottomNavCloseImage: 'http://xxx.com.tw/images/closelabel.gif'
就可以了, 不過請教老師如果要設成根目錄的話 語法是???

2008/11/8 18:59
 


回覆: 回覆: 回覆: 回覆: 很棒的~光箱特效「 Lightbox2 」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
在路徑最前面加一條斜線 / 就是指根目錄了

例如 /images/close.gif

2008/11/8 20:26
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員一級
註冊日期:
2008/11/11 10:50
留言: 2
全是英文看不明白丫

2008/11/11 16:53
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員二級
註冊日期:
2008/10/24 8:14
留言: 6
老師可否在教一下用在Flash要這麼寫喔~@@!!!

2008/11/24 7:52
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員二級
註冊日期:
2008/10/24 8:14
留言: 6
老師.在請問一下我在DW可以用不過~ = =a 為什麼開起的畫面都是靠齊上方(不像你做的是置中預覽)??

2008/11/29 1:36
 


回覆: 回覆: 很棒的~光箱特效「 Lightbox 」
會員二級
註冊日期:
2009/9/26 19:46
留言: 8
你可以從屬性上面做更改,如果你的不是cs4的話更改的方式就在底下的屬性
當然你要找對要置中的是那個部分。
如果是cs4的話建議你養成習慣,從css設定更改。

2009/10/7 15:42
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員一級
註冊日期:
2009/10/29 11:22
留言: 5
請問老師,您的範例裡面,Next跟Prev都有出現,但是我的都沒有出現,Close跟Loading有出現,程式完全是照老師說的去做,請問老師您的Next跟Prev的圖是放哪邊的JS裡面呢?謝謝!

2009/10/29 15:39
 


回覆: 回覆: 很棒的~光箱特效「 Lightbox 」
會員一級
註冊日期:
2009/10/29 11:22
留言: 5
我知道是怎麼回事了~~

原來我少打了『 rel="lightbox[roadtrip]"』這個...

2009/10/29 15:48
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員二級
註冊日期:
2009/9/1 23:26
留言: 10
老師請問下面所說的語法是要加在哪哩,可以再說的更詳細一點嗎?謝謝!

但如果有 test1 - test 100 個目錄...那怎麼辦?

http://www.lokeshdhakar.com/projects/lightbox2/
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

原本網頁中有提到 Loading.gif / close.gif 應該是在 lightbox.js 這個檔案裡設定
原本的設定應該是文件相對位子.

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

==========================================================================================
我直接用
fileLoadingImage: 'http://xxx.com.tw/images/loading.gif',
fileBottomNavCloseImage: 'http://xxx.com.tw/images/closelabel.gif'
就可以了, 不過請教老師如果要設成根目錄的話 語法是???
.
引用happykao

2009/11/23 14:53
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員一級
註冊日期:
2010/11/17 18:53
留言: 1
如果只想在特效內顯示一張圖片, 按鈕只有" close", 沒有"next"和"prev", 我要怎樣修改?

2010/11/17 18:58
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員三級
註冊日期:
2008/12/18 0:33
留言: 24
老師我不成功,測試後我找到了那裡出問題,我的網頁有其他的javascript 和 css, 我發現如果刪除這兩句後lightbox便可以正常運作,不知道可以怎樣解決? 附上jquery.js,htcmenu.js 給老師看看, 謝謝老師!




附件:


rar js.rar 大小: 24.63 KB; 下載次數: 492

2011/4/30 4:00
 


回覆: 很棒的~光箱特效「 Lightbox 」
會員三級
註冊日期:
2008/12/18 0:33
留言: 24
更正,是刪除了"" 這一句!

2011/4/30 14:48
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS