顯示具有 blogger 標籤的文章。 顯示所有文章
顯示具有 blogger 標籤的文章。 顯示所有文章

如何讓自己的部落格有光箱效果(Lightbox)與 Wordpress 、 Blogger 結合

豆漿先前在這篇有使用紀錄,我想用這篇文章筆記自己使用 Lightbox 這個光箱外掛的心得,。

什麼是 Lightbox?

它其實是一種在blog展示自己圖片特效的 JavaScript 程式,在網路上可以看到許多應用與教學。

還是不知道是什麼東西,直接點擊下面的圖:

在部落格上是顯示小圖,不過點擊後會顯示大的圖檔,而呈現光箱( Lightbox )的效果,由於它檔案不大執行效率也不錯,在寫文章時候只要插入小圖,這樣多少能減少載入網頁的時間,所以在網路上非常受到部落客的喜愛,同時在 Wordpress 也有相關的 Plugin 外掛。

如果是blogger、pixnet等可以使用插件或網頁元素執行html、 JavaScript 程式的BSP,則適用以下方式:

豆漿不寫教學,由於網路很多前輩分享過了,如果懶得找,豆漿提供幾個供參考,當然自己也作紀錄。

良人的大秘寶 » 在Blogger Beta使用Lightbox顯示圖片

靖.技場 » Lightbox JS --- 光箱特效使用教學

swf.com.tw » 使用LightBox展示線上影像

JH2 » [網頁特效小偏方] Lightbox圖片展示 (疑難雜症)

需要注意的地方

  • 如果下載下來的檔案,上傳到自己空間,在部落格<head></head>中設定的路徑要正確,並且注意設定lightbox.js及lightbox.css這兩個文件中所有的圖片路徑。不然Lightbox就會有缺圖或無效等情況發生。
  • 如果用別人空間要小心注意,因為可能流量太大或者檔案不見,導致自己部落格讀不到js、css,或讀比較慢,最後Lightbox的效果無法展示,這時候就尷尬了。
  • 還有Lightbox需要等完整載入後,再點圖片才能顯現效果,不然會直接連結到圖片原始網頁。

以上是我在使用過程遇到的問題。

如果是使用Wordpress 的部落客,則可以使用下列三個Plugins:

jQuery Lightbox

Lightbox-2

lightbox-2-wordpress-plugin

如果還不夠可以參考這篇有其他類似功能的外掛。

使用心得可以參考Sinchen大寫得這篇WordPress 推薦Lightbox外掛jQuery Lightbox Plus。

個人是使用Lightbox-2,可以在moki’s首頁右邊看到我同時結合flickrrss這個Plugin的效果(關於flickrrss這個使用心得容許我下次寫了),使用這個Plugin最主要原因是因為它有個auto-lightboxing’ of image links的功能,它自動幫你把圖片組合成為以連續性的光箱式的展示,也就是你目前所在頁面所有圖片作連續光箱展示。

教學部份很簡單(其實我自己也非常懶得再貼圖了)

1.將下載回來的檔案解壓縮。

2.上傳到 /wp-content/plugins/下 的資料夾。

3.在後台啟動外掛即可。

4.在插件設置頁勾選Auto-lightbox image links。

4.最後在自己在插入的小圖設置連結到原始圖。

至於有個不用插小圖的小技巧:

在黑白天空網站這篇寫到

<a href=”图片地址“><img class=”alignnone size-thumbnail wp-image-692″ title=”标题” src=图片地址 alt=”标题” width=”144″ height=”81″ /></a>

直接定義圖片的大小,這樣也就不用插縮圖了,真的蠻方便的。

不過由於豆漿還有結合Windows Live Writer(WLW)內的外掛 LightBox_SimplePlugin ,所以在撰寫文章不用在寫rel="lightbox"這個語法了。

寫到這裡應該大致上不會有任何問題,有問題也別找我,基本上網路都找得到,因為我本身沒資訊背景,只是喜歡玩部落格而已。

[+/-] 繼續閱讀...

你今天噗浪了沒?

其實噗浪(plurk)他是一個微型網誌

還有其他類似比較有名的例如Twitter

他們共通點都是不需要打出大量文字

有點像是即時的心情抒發寫照

同時又可以連結其他同樣使用這個功能的朋友或網友

如果你發布一個訊息,同時間其他有追蹤你或加你好友的

都可以看到你的訊息,同時加入討論聊天哈拉

plurk同時也可以分享圖片、影片,也可以分享連結

他的設定也很簡單,介面也很可愛,還可以便換介面背景

他同時也可以加入到你自己的blogger裡

一開始是在電腦玩物的網站看到介紹

後來發現他原來有很多著名的部落客跟網友在使用

才開始瞭解plurk

他還有一個我覺得蠻有趣的東西就是「Karma」卡碼值

可以因為他的高低,能用的功能有多寡

有點練功升等的感覺

對了最重要的是他是中文的

我的plurk:點我

延伸閱讀:

噗浪[Plurk]介紹-這是一種微型的Blog,可以隨時分享你的每一分鐘

Plurk 噗浪兩個月,初心者重點工具集錦

Plurk 好好玩!(進階應用篇)

[+/-] 繼續閱讀...

新發現:滑鼠移過,改變網頁任何元素透明度 (FF、IE7、IE6)

今天在這個網站飛鳥新樂園發現到一個簡單又很有質感的特效

他直接可以讓你的圖片製造出透明度的變化

豆漿覺得非常實用,決定以後在展示攝影圖片展示時可以稍微區別

以下是他的教學連結網頁:點我

我把他測試在前一篇高雄武德殿的圖片展示

發現其實他配合lightbox的特效還蠻不錯的

他特別在可以讓你選擇性針對想要展示特效的地方

一一設定,雖然麻煩不過豆漿我利用文字編輯的取代功能也很快就弄好

只需要針對你需要的地方,不管是div、span、img、p、td等

加入:

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100;"    
onMouseOut="this.style.opacity=0.5;this.filters.alpha.opacity=50;"
style="opacity: 0.5;filter:Alpha(Opacity=50)"


即可

詳細的介紹請到他的網站

範例:




[+/-] 繼續閱讀...

日月潭lightbox展示測試

這次練習用lightbox來展示部落格裡面的圖片

希望減少進入文章畫面的讀取時間

以小一點的圖片取代大的圖片

再以點取方式,進一步觀賞更高畫素的圖片檔案

以下是展示:

於98/02/28去日月潭遊玩內容

這篇算是blogger練習呵

過程有遇到不知如何開始

還有找網頁空間,檔案傳上去修改路徑

最後遇到的是成功後,在展示的圖片無法顯示下一張跟上一張的選項

搞了蠻久的,不過成功了真的很開心

參考內容:

良人的大秘寶:在Blogger Beta使用Lightbox顯示圖片

JH2 走光:[網頁特效小偏方] Lightbox圖片展示 (疑難雜症)

[+/-] 繼續閱讀...