[插件]Lightbox For UBB

首先我要罵個髒話…..幹

為什麼呢? 因為我寫這個插件,寫到罵髒話,沒搞過這麼麻煩GY的插件…

雖然寫出來了,但是還是要怨一下,UBBCode內的正則化表示法實在有夠難搞

要不是阿炫在幫我,我早就乖乖去上課了 XD

好了,回歸正題,此檔案是使用 Lightbox JS v2.0,使用ajax,利用到 Prototype (我不知道這啥 XD)

下載插件檔案:

 

效果預覽:

單一圖片:
[imgx,title=註解1,url=attachment/lightboxsample/image-1.jpg]thumbs=attachment/lightboxsample/thumb-1.jpg[/imgx] [imgx,url=attachment/lightboxsample/image-2.jpg]thumbs=attachment/lightboxsample/thumb-2.jpg[/imgx]
群組圖片:
[imgx,group=Mesak,title=註解3,url=attachment/lightboxsample/image-3.jpg]thumbs=attachment/lightboxsample/thumb-3.jpg[/imgx] [imgx,group=Mesak,title=註解4,url=attachment/lightboxsample/image-4.jpg]thumbs=attachment/lightboxsample/thumb-4.jpg[/imgx] [imgx,group=Mesak,title=註解5,url=attachment/lightboxsample/image-5.jpg]thumbs=attachment/lightboxsample/thumb-5.jpg[/imgx] [imgx,group=Mesak,title=註解6,url=attachment/lightboxsample/image-6.jpg]thumbs=attachment/lightboxsample/thumb-6.jpg[/imgx]

解壓縮後會有下列檔案

plugin\
├lightbox\
│├admin.php
│├config.php
│├lang_zh-cn.php
│├lang_zh-tw.php
│├setup.php
│└ubbanalyse.php
images\
├css\
│└lightbox.css
├lightbox\
│├blank.gif
│├close.gif
│├closelabel.gif
│├list.bat
│├list.txt
│├loading.gif
│├next.gif
│├nextlabel.gif
│├prev.gif
│└prevlabel.gif
└lb\
├effects.js
├lightbox.js
├prototype.js
└scriptaculous.js

如果用FTP上傳的話,直接將images & plugin上傳到Blog目錄下

接著安裝plugin,從後台的 外觀延伸→外掛程式管理→安裝外掛程式 輸入目錄名稱lightbox

接著是加入Script,在後台內,參數設定 →<head>區域額外程式碼內,插入此段Code



安裝完畢後,後台的plugin 插件可管理lightbox,不過只有四個選項….

接著是代碼,因為 正則化表示法,搞的我很頭大,最後只用出這種用法

[imgx]圖片路徑[/imgx]
[imgx,url=圖片路徑]顯示文字[/imgx]
[imgx,url=圖片路徑]thumbs=縮圖路徑[/imgx]
[imgx,group=群組ID,url=圖片路徑]顯示文字[/imgx]
[imgx,group=群組ID,url=圖片路徑]thumbs=縮圖路徑[/imgx]
[imgx,group=群組ID,title=註解文字,url=圖片路徑]顯示文字[/imgx]
[imgx,group=群組ID,title=註解文字,url=圖片路徑]thumbs=縮圖路徑[/imgx]

一定要注意的事項

 

    • 輸入的時候除了第一種只輸入圖片路徑外的方式,其他一律要輸入顯示文字,否則代碼會亂掉….

 

  • 本程式在網頁完全載入才有效果,未完全載入的時候點擊圖片時會直接開啟圖片

替代方案

如果你擔心,未來Boblog更新後,不想用此plugin該怎麼辦,或是不支援等等的問題
有個替代方案,就是自行輸入HTML

<code>
&lt; a title="圖片標題" href="圖片位置" rel="lightbox"&gt;文字或圖片
</code>

這種方法最簡單,將來不安裝lightbox 還是可以正常顯示,想用群組就這樣放

<code>
&lt; a title="圖片標題" href="圖片位置1" rel="lightbox[群組]"&gt;文字或圖片
&lt; a title="圖片標題" href="圖片位置2" rel="lightbox[群組]"&gt;文字或圖片
&lt; a title="圖片標題" href="圖片位置3" rel="lightbox[群組]"&gt;文字或圖片
&lt; a title="圖片標題" href="圖片位置4" rel="lightbox[群組]"&gt;文字或圖片
&lt; a title="圖片標題" href="圖片位置5" rel="lightbox[群組]"&gt;文字或圖片
</code>

另外也可以配合UBB內碼使用

<code>
&lt; a title="圖片標題" href="圖片位置" rel="lightbox"&gt;IMG代碼
</code>
本文可任意散發連結網址,未經授權不得轉載文章任何內容。圖片文字著作權皆為 Mesak 所有