内容正在载入中,请稍后……
公告
搜索
统计
其他
9 Dec.2006

[插件]Lightbox For UBB  BO_BLOG 夜晚

作者: 我就是个世界   分类:技术&学习 » 网页设计   出处:本站原创            | |

终于搞明白了mesaK的这个图片展示特效的插件,成功运用在本站BLOG上.




点击下载安装文件


效果预览:


單一圖片:
 
群組圖片:
   

解壓縮後會有下列檔案



引用



  1. plugin\
  2. ├lightbox\
  3. │├admin.php
  4. │├config.php
  5. │├lang_zh-cn.php
  6. │├lang_zh-tw.php
  7. │├setup.php
  8. │└ubbanalyse.php
  9. images\
  10. ├css\
  11. │└lightbox.css
  12. ├lightbox\
  13. │├blank.gif
  14. │├close.gif
  15. │├closelabel.gif
  16. │├list.bat
  17. │├list.txt
  18. │├loading.gif
  19. │├next.gif
  20. │├nextlabel.gif
  21. │├prev.gif
  22. │└prevlabel.gif
  23. └lb\
  24.  ├effects.js
  25.  ├lightbox.js
  26.  ├prototype.js
  27.  └scriptaculous.js

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

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

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



引用

<script type="text/javascript" src="images/lb/prototype.js"></script>
<script type="text/javascript" src="images/lb/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="images/lb/lightbox.js"></script>
<link rel="stylesheet" href="images/css/lightbox.css" type="text/css" media="screen" />
安裝完畢後,後台的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

    引用

    <a href="圖片位置" rel="lightbox" title="圖片標題">文字或圖片</a>
    這種方法最簡單,將來不安裝lightbox 還是可以正常顯示,想用群組就這樣放


    引用

    <a href="圖片位置1" rel="lightbox[群組]" title="圖片標題">文字或圖片</a>
    <a href="圖片位置2" rel="lightbox[群組]" title="圖片標題">文字或圖片</a>
    <a href="圖片位置3" rel="lightbox[群組]" title="圖片標題">文字或圖片</a>
    <a href="圖片位置4" rel="lightbox[群組]" title="圖片標題">文字或圖片</a>
    <a href="圖片位置5" rel="lightbox[群組]" title="圖片標題">文字或圖片</a>
    另外也可以配合UBB內碼使用


    引用

    <a href="圖片位置" rel="lightbox" title="圖片標題">IMG代碼</a>
  • 分享到QQ空间
    最后编辑: 我就是个世界 编辑于December 9, 2006 04:15
    时间:04:13 评论(2) 引用(0) 阅读(5311) Tags: , , , ,
    发表评论
      昵称 [注册]
      密码 (游客无需密码)
      网址
      电邮
    OpenID登入 权限选项 表情