筆記 | 在FC2模板置入ThickBox 3.1
於是!鏘鏘鏘!真的可以~那就分享我使用的方式。
以下引用自OECSPACE - JavaScript 教學 ThickBox 3.1
ThickBox 是 Cody Lindley 使用超輕量級的 jQuery 所開發,
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化,在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.
- 對於圖像能用單一或多張的方式來展示,並能重新調整大於瀏覽器的圖檔(我使用的是這個功能)
- 能夠在透明層中開啟內置框架預覽網頁
- 開啟顯示網頁中指定的區塊內容
- AJAX Content 載入網頁內容
瀏覽器支援:
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+,
Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+
下載JS、CSS與圖檔等檔案 解壓後上傳至FC2文件夾
我提供的zip檔沒有另外三個所需的圖檔。
在設定樣板內選擇你所要使用的樣板中編輯HTML
<HEAD> </HEAD> 之間貼上下列程式碼
編輯文章時貼圖所需的語法為下列:<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" _fcksavedurl=""thickbox.css"" _fcksavedurl=""thickbox.css"" _fcksavedurl=""thickbox.css"" _fcksavedurl=""thickbox.css"" _fcksavedurl=""thickbox.css"" _fcksavedurl=""thickbox.css"" type="text/css" media="screen" />
單一圖像預覽:

多張圖像預覽:<a href="img/photo1.jpg" _fcksavedurl=""img/photo1.jpg"" _fcksavedurl=""img/photo1.jpg"" _fcksavedurl=""img/photo1.jpg"" _fcksavedurl=""img/photo1.jpg"" _fcksavedurl=""img/photo1.jpg"" _fcksavedurl=""img/photo1.jpg"" title="Picture explanation" class="thickbox">
<img src="img/photo1_s.jpg" _fcksavedurl=""img/photo1_s.jpg"" _fcksavedurl=""img/photo1_s.jpg"" _fcksavedurl=""img/photo1_s.jpg"" _fcksavedurl=""img/photo1_s.jpg"" _fcksavedurl=""img/photo1_s.jpg"" _fcksavedurl=""img/photo1_s.jpg"" alt="Single Image" /></a>

<a href="img/photo2.jpg" _fcksavedurl=""img/photo2.jpg"" _fcksavedurl=""img/photo2.jpg"" _fcksavedurl=""img/photo2.jpg"" _fcksavedurl=""img/photo2.jpg"" _fcksavedurl=""img/photo2.jpg"" _fcksavedurl=""img/photo2.jpg"" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo2_s.jpg" _fcksavedurl=""img/photo2_s.jpg"" _fcksavedurl=""img/photo2_s.jpg"" _fcksavedurl=""img/photo2_s.jpg"" _fcksavedurl=""img/photo2_s.jpg"" _fcksavedurl=""img/photo2_s.jpg"" _fcksavedurl=""img/photo2_s.jpg"" alt="Plant 1" /></a>
<a href="img/photo3.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo3_s.jpg" alt="Plant 2" /></a>
<a href="img/photo4.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo4_s.jpg" alt="Plant 3" /></a>
- 預覽圖片支援的格式有 .jpg .jpeg .png .gif .bmp
- 多張圖片的效果再開啟後會顯示上一頁和下一頁的連結,只要在每一個圖片標籤使用 rel 元素並設定相同的值為 rel="gallery-plants"
以上。我不負責教學,我只負責分享出來,所以有問題不要問我

後記:我是用火狐顯示沒問題,但用IE7時問題來啦~圖片跑到下方位置沒辦法正常顯示… 晚點再找解決方法。
- 題目 : blog 掛件
- 種類 : 網路部落
- 分類 :[馬麻的分類]FC2筆記本
留言 1- 引用 0
- 2009/02/09
筆記 | 樹狀分類
引用自小倩的blog將下段語法加至側邊欄位最後一個,經測試最好是放在RSS那欄,然後移至最底。
<script type="text/javascript">
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("∟");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
<!-- ▼ツリー化スクリプトのカテゴリ・アーカイブ対応(ここから) -->
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('',RegExp.$1,'').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('[',RegExp.$2,']').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
<!-- ▼ツリー化スクリプトのカテゴリ・アーカイブ対応(ここまで挿入 -->
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false;
gTreeOption['list'] = '├ ';
gTreeOption['end'] = '└ ';
gTreeOption['leef'] = '<br />\n';
gTreeOption['top'] = '<br />\n';
gTreeOption['btm'] = '';
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
</script>
分類目錄設定:設定外掛程式內修改分類目錄,編輯HTML,將原有語法覆蓋為下列語法 -
<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>
分類名稱修改:至管理類別中設定分類名稱,子分類不能打勾,原來預設的分類也必需修改。
最新回應樹狀顯示:設定外掛程式內修改最新回應欄,編輯HTML,將原有語法覆蓋為下列語法 -格式:[分類名]子分類
範例1:[恩恩的分類]生活小記
範例2:[馬麻的分類]隨筆手札
<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment"><%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li>
<!--/rcomment-->
</ul>
</div>
最後要大感謝小倩提供如此實用的資訊,感恩!
- 分類 :[馬麻的分類]FC2筆記本
留言 0- 引用 0
- 2009/02/05






fiore(03/17)
Leimi(02/26)
Leimi(02/26)
Leimi(02/26)
Leimi(02/26)
a.jun.(02/24)
rosa(02/23)