2010/04/15

我想要安裝lightbox在blogspot上

感謝 [同學:God] 長時間提供我各式 javascript 程式研究,
事實上他常騷擾我。

最讓我覺得好用的程式是…lightbox,
lightbox 就字面上來說就是「燈箱效果」,
就是在網頁上點擊「縮圖 」會出現「原始大小圖片」還可以有下一張連結。
詳請請參閱:LightBox2

這個出發點的想法很棒,
棒的地方是讓上網的人不用一直開視窗、一直關視窗、一直回上一頁。
常見「縮圖」看「大圖」有兩種方式,

  1. 跳出新視窗
    所以看1張要關1個視窗,
    看10張要關10個視窗。
    如果你很懂html,
    就知道還有一個方法是在link 裡面設 target,
    不過因為你很懂…你就知道會一直蓋過 display 視窗。
  2. 在原視窗開啟,
    看1張要回上一頁1次,
    看10張就要回上一頁10次。

lightbox 貼心的地方就是,
可以在原視窗看完所有的「大圖」,
然後回到原始網頁中詳讀文字。

但是我對 javascript 一直是小小小的排斥,
原因是我經歷了瘋狂的js和 ja大混戰時期,
還有瀏覽器大混戰時期,
所以網頁一直維持簡單就好的內容。
我對 lightbox 還是有幾點建議的,
  1. 它需要連結3個js檔。
    這當然是為了管理方便和開發方便(注解)。
    但這3個js我通常只會用在 lightbox上,
    感覺可以統一成一個…。
    對,
    我不會自己修嗎?
    我不想。
  2. 它預先用 js 定義各個圖片的位置,
    而不用用 css,
    為什麼要這樣子呢?
像是我在 blogspot 上面引用 js 時,
通常會直接引用各個js程式的官方網站,
就不用再下載…再上傳…再安排路徑。
在lightbox引用官網的js,
卻被js定義了圖片,
我無法修改,
因為在 blogspot 也無法建立一個/ image/ 來存放圖片,
所以我得要想個方法來解決,
就在我學了 8年 javascript 但是都學不會的情況下…我還在思考

解決方案:
  1. 官網程式下載後,修改圖片位置後,再上傳至私人空間供 blogspot 連結用。(很標準)
  2. 官網程式改編圖片位置於js中,安裝方法和官網一樣,提供已套裝好的安裝程式。(直接用,很方便)
  3. slimbox,是 lightbox延生出的程式,不會有圖片路徑被固定的問題,可以直接安裝於blogspot上。(算是師出同門的程式)

但這都不是我要的方法:
我要直接由官網匯連結js檔,這樣版本升級不用怕(雖然我覺得他不會升級)。

開始解題:
不知道怎麼解,
因為這個問題很白痴,
一般的js容許你修改的話,
會用一個變數如 var fileBottomNavCloseImage='images/closelabel.gif';
這樣使用者馬上就可以修改了,
不過lightbox是用了一個 .extend 匯入 window的屬性,
所以只要設 window的屬性就可以了。
不過我是初學者,
覺得解得出來也算是及格了。

在blogspot 上安裝 lightbox
如官網的方式在 head 連結入 3個 js,
然後圖片的連結也一樣要加 rel,
css直接放在css區就好了…不要另外引進,
失連結的icon就用
<script language="javascript">
window.LightboxOptions.fileLoadingImage="***";
window.LightboxOptions.fileBottomNavCloseImage="***";
<script>
來定義。

UPLOAD 2010/4/16
  1. thickBox
  2. lightBox2 Modifications
  3. lyteBox
UPLOAD 2010/4/26
為什麼開發程式的人不把程式都放一個檔案…要分成很多個?
因為一個網站如果有10個js需要連入,
也許第一個網頁只需要1、3、5、6,
第二個網頁是需要7、8、9、10,
所以各取所需的連入即可,
這樣比較節省頻寬。
另一個,
把程式分成不同層次及部份的架構,
再依據架構配置檔案,
有利於開發者作業。

3 則留言:

周®福:謝謝,留言不一定會在10年內有回應。