【Plugin】lightbox 光箱效果

這篇真算是老梗了,之前好像也寫過,不過 …不知道為甚麼消失了 :XD:

網友Forster兄寫信問我

在你Blog上,當我點選圖片後,會跳出一個FLash展示圖片。
我覺得很炫,所以想請教一下這是某網路相簿的功能,還是你自己寫的語法呢?


Forster詢問的效果,像是下圖

其實作法相當的容易,他是根據lightbox js v2.0所創造出來的,除了看起來酷炫的動畫效果外,你也可以讓它變成點文字變成圖片展示,展示組圖等其他功能,如果你喜歡貼圖片到你的網站上,除了展示效果很漂亮之外,又不至於讓過大的圖片破壞版面,而有可以達到有需要的人可以看到大圖的功能,作法可以直接使用作者的網站作法來完成,又或者透過Safirul Alredha的plugin來完成這個功能實作(事實上,類似的plugin還有好多個)。

相關討論:WP lightboxJX plugin-顯示圖片的另一選擇

分享另一酷炫功能:ThickBox 2.1 很酷的WEB UI 組件,這個功能我試作成功,可是…好像沒什麼用到的機會,所以我現在並沒有使用

Facebook comments:

  • FosterTAZ

    感謝羅賓兄回答。 :worship:

    因為我的Blog是在Blogger.com上,所以還另外Google到一篇:
    「在Blogger Beta使用Lightbox顯示圖片」 by 國良先生
    http://klcintw4.blogspot.com/2006/09/blogger-betalightbox.html
    :yes: :yes: :yes:

  • FosterTAZ

    感謝羅賓兄回答。 :worship:

    因為我的Blog是在Blogger.com上,所以還另外Google到一篇:
    「在Blogger Beta使用Lightbox顯示圖片」 by 國良先生
    http://klcintw4.blogspot.com/2006/09/blogger-betalightbox.html
    :yes: :yes: :yes:

  • http://blog.daydream.idv.tw 冰漾

    兩個我都用過, 覺得 lightbox 的 jslib 太大沱, 所以改用 ThickBox…
    ThickBox 也有圖片顯示功能, 另外也還有很多功能, 比 lightbox 更上一層…

    不過 ThickBox 的 jslib 會跟 Beata 的 ajax-comments-reply 互相衝突, 導致迴響的 ajax 效果失效, 因此決定不使用了… :sweat:

  • http://blog.daydream.idv.tw 冰漾

    兩個我都用過, 覺得 lightbox 的 jslib 太大沱, 所以改用 ThickBox…
    ThickBox 也有圖片顯示功能, 另外也還有很多功能, 比 lightbox 更上一層…

    不過 ThickBox 的 jslib 會跟 Beata 的 ajax-comments-reply 互相衝突, 導致迴響的 ajax 效果失效, 因此決定不使用了… :sweat:

  • Robbin

    To Foster:
    搞定這個功能就太好啦,之前我也收過你說的那篇文章的書籤,不過還好你自己找到了,哈哈 :cool:

    To 冰漾:

    我一開始就是從你那篇看到的,才跟著用google去找看看相關資料 :heart:

blog comments powered by Disqus
    I am Robbin Huang
    我不是甚麼部落客
    我就是
    鐵道員、BBer
    我的PIN :217ACE9F
    更多About me

  • 武汉房地产网: 贵站管理员 ,你好武房网 申请文字友情链接(首页 ,内页)武汉房地产...


  • Robbin: 恭喜你了這篇文章可能現在的實用性不高不管 如何祝你好運—...


  • Lisa: 謝謝分享! 小妹剛開始經營blog, 第一篇就找到你的。很有用!到小妹的blo g...


  • Robbin: 你可以試試看用fitness band的關鍵字在youtube找...


  • Caroltangtang: 我也只是找有關彈力繩的相關教學,不...

  1. Yesterday

    1. Checked in at 台北車站 Taipei Main Station

      7:06am via Foursquare

  2. September 7th

    1. Checked in at 高雄車班宿舍

      2:51pm via Foursquare

    2. 台鐵哪裡有績效獎金了,我也想領 [robbinhuang]

      1:29am via Plurk

  3. September 6th

    1. Liked 爆笑小貓痛失獵物暈倒 .flv.

      3:32pm via YouTube

  4. September 4th

    1. Shared 普羅米修斯 - 你,知道你在連署甚麼嗎?.

      10:06am via Delicious

    2. Shared 10 馬拉松訓練的錯誤.

      9:55am via Delicious

    Upstream

偶像做的事其實都和你們沒兩樣啊

MOBO ME

My Flickr


æ²æçmeg
æ¸å¢å±±é ­
eye
æ é
æ¿æ©
ä¾ååç§

站內分類

歷史紀錄

本站授權

Creative Commons License
本站創用 CC 授權.

同時也在

wordpress歡樂正體中文交流所
PHVsPjxsaT48c3Ryb25nPndvb19hZHNfcm90YXRlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzE8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjVhLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzI8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjViLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzM8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjVjLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjVkLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX21wdV9hZHNlbnNlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWRfbXB1X2Rpc2FibGU8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fYWRfbXB1X2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy8zMDB4MjUwYS5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9tcHVfdXJsPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfcGFnZTwvc3Ryb25nPiAtIFNlbGVjdCBhIHBhZ2U6PC9saT48bGk+PHN0cm9uZz53b29fYWRfdG9wX2Fkc2Vuc2U8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfZGlzYWJsZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfaW1hZ2U8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzQ2OHg2MGEuanBnPC9saT48bGk+PHN0cm9uZz53b29fYWRfdG9wX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8xPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzI8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF80PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWx0X3N0eWxlc2hlZXQ8L3N0cm9uZz4gLSBkYXJrYmx1ZS5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19hcmNoaXZlczwvc3Ryb25nPiAtIGFyY2hpdmVzPC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2NhdGVnb3J5PC9zdHJvbmc+IC0gU2VsZWN0IGEgY2F0ZWdvcnk6PC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2VudHJpZXM8L3N0cm9uZz4gLSBTZWxlY3QgYSBudW1iZXI6PC9saT48bGk+PHN0cm9uZz53b29fYXV0aG9yPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hdXRvX2ltZzwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19iZ3I8L3N0cm9uZz4gLSBibGFjay5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fY3NzPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY3VzdG9tX2Zhdmljb248L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0dXJlZF9jYXRlZ29yeTwvc3Ryb25nPiAtICZhZWxpZzuUnSZhcmluZzsmZnJhYzEyOyZwbHVzbW47JmVhY3V0ZTuaJnVtbDsmYWVsaWc7i408L2xpPjxsaT48c3Ryb25nPndvb19mZWF0dXJlZF9lbnRyaWVzPC9zdHJvbmc+IC0gNDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXRfZW50cmllczwvc3Ryb25nPiAtIDU8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX2lkPC9zdHJvbmc+IC0gcm9iYmluPC9saT48bGk+PHN0cm9uZz53b29fZmVlZGJ1cm5lcl91cmw8L3N0cm9uZz4gLSBodHRwOi8vZmVlZHMuZmVlZGJ1cm5lci5jb20vcm9iYmluPC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX2VudHJpZXM8L3N0cm9uZz4gLSBTZWxlY3QgYSBudW1iZXI6PC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX2lkPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWVfdGh1bWJfaGVpZ2h0PC9zdHJvbmc+IC0gNTc8L2xpPjxsaT48c3Ryb25nPndvb19ob21lX3RodW1iX3dpZHRoPC9zdHJvbmc+IC0gMTAwPC9saT48bGk+PHN0cm9uZz53b29faW1hZ2Vfc2luZ2xlPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19sYXlvdXQ8L3N0cm9uZz4gLSBkZWZhdWx0LnBocDwvbGk+PGxpPjxzdHJvbmc+d29vX2xvZ288L3N0cm9uZz4gLSBodHRwOi8vcm9iYmluLmNjL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvMy1yYWlsYmFiZS5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19tYW51YWw8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vc3VwcG9ydC90aGVtZS1kb2N1bWVudGF0aW9uL2dhemV0dGUtZWRpdGlvbi88L2xpPjxsaT48c3Ryb25nPndvb19vdGhlcl9lbnRyaWVzPC9zdHJvbmc+IC0gNDwvbGk+PGxpPjxzdHJvbmc+d29vX290aGVyX2hlYWRsaW5lczwvc3Ryb25nPiAtIDQ8L2xpPjxsaT48c3Ryb25nPndvb19yZXNpemU8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fc2hvcnRuYW1lPC9zdHJvbmc+IC0gd29vPC9saT48bGk+PHN0cm9uZz53b29fc2hvd19jYXJvdXNlbDwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG93X2ZlYXR1cmVkPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX3Nob3dfdmlkZW88L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fc2luZ2xlX2hlaWdodDwvc3Ryb25nPiAtIDE4MDwvbGk+PGxpPjxzdHJvbmc+d29vX3NpbmdsZV93aWR0aDwvc3Ryb25nPiAtIDI1MDwvbGk+PGxpPjxzdHJvbmc+d29vX3RhYnM8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3RoZW1lbmFtZTwvc3Ryb25nPiAtIEdhemV0dGU8L2xpPjxsaT48c3Ryb25nPndvb191cGxvYWRzPC9zdHJvbmc+IC0gaHR0cDovL3JvYmJpbi5jYy93cC1jb250ZW50L3dvb191cGxvYWRzLzMtcmFpbGJhYmUuanBnPC9saT48bGk+PHN0cm9uZz53b29fdmlkZW9fY2F0ZWdvcnk8L3N0cm9uZz4gLSAmYXJpbmc7JmZyYWMxMjsmcGx1c21uOyZjY2VkaWw7iYcmYXJpbmc7iIYmYXVtbDsmb3JkbTsmbGFxdW87PC9saT48L3VsPg==