輕鬆在自己網站上添加『光盒』

先來說一下光盒是什麼
光盒是就本站上面 那幾篇 宅圖文 中有用到的
點擊圖片 會顯是 大圖片

那這有什麼好的嗎?
還記得上一篇文章嗎?(css簡單又完美 的 幫blog圖片自動縮圖)
縮圖了 然後 想讓別人看大圖怎麼半?
總不可能用個簡單連結 連到原始圖的網址吧
這樣觀看人多不方便 所以 光盒 是最佳的選擇?

接下來教大家 怎麼弄好一個光盒 在自己的網站上
當然不是每張圖都會套用到 光盒上
因為我們不可能 每張圖 都要用到光盒吧
所以 把要用光盒圖片 加上一些語法 就可以囉

第1步:下載js 和 css 檔案

載點:highslide.rar
解壓縮密碼:skybox.pp.ru

第2步:上傳到自己網站內

第3步:打開 網站的 header.html

header.html 通常是 檔頭 的檔案
也就是 放在這裡面的原始碼 在網站上 每一頁都會出現這個原始碼

當然有些網站 沒有這個
但是 總有可以新增到每頁的選項 或 檔案
把他打開來吧

第4步:插入原始碼~


<script type="text/javascript" src="highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="highslide-ie6.css" /><![endif]-->
<script type="text/javascript">
hs.graphicsDir = 'http://skyboxs.net/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'dark borderless floating-caption';
hs.fadeInOut = true;
hs.dimmingOpacity = .75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>

第5步:對圖片連結做修改

一班的圖片連結為
<img src="圖片連結" border="0">
網戰繼上次的自動縮圖 所以圖片會自動縮小
光盒是用在 標籤a上面 中間會要新增編號 不要重複
所以在圖片標籤前後加上a標籤
前面加上

後面加上

會變成圖片所顯示的樣子

在〈輕鬆在自己網站上添加『光盒』〉中有 13 則留言

  1. sky37042

    回覆 zkm
    爛雨傘…
    他會把我寫的佈景主題當病毒對待
    里香~ 渚~ 天使~ -(* 05*)- -(* 05*)-
    ((小心天使火大 用分身術 讓那無情天使把你的防毒給XX掉

  2. hacker_bug

    回覆 sky37042
    其實灌防毒都是心理上的需要,
    不灌防毒,心理上都不安,怕中毒,
    中毒不要緊,但如果中上了破壞性病毒,
    等待重灌是一個對任何人都不喜歡…
    而且,可能朋友中會有一些壞人,但技術又不好的,
    想查看你電腦中的秘密,
    他直接送一個未改變的惡意程式給你便慘了….
    沒有基本的防護,根本查不出來,
    (如果那壞人有技術,那就沒東西可以說了…)

    回覆 叛逆羊羊
    其實安裝一個比較多人用的防毒軟件,就夠了~

  3. sky37042

    回覆 zkm
    我測試 一下在桌面 一下在D碟
    沒有固定 = =
    所以… 直接把 C 和 D 碟 給例外
    -(* 10*)- -(* 10*)-

    回覆 hacker_bug
    電腦沒是不要亂借人
    上網右不會去逛一些怪怪網站
    ((有時候真的要逛 VM 很好用 ^^ -(* 13*)-

  4. Anthony

    剛好有圖太大的問題
    取用了(有授權浮水印耶),話說 img src=””後要好像要加 windth=”xxx” 才可以縮大小,原始碼也要改一改才會動

    難不成是人品問題?= =

    Sky37042回覆:
    原始大小要用 CSS去控制阿…
    授權 你可以自己改 自己去打開JS編輯

  5. AR

    請問板大~
    如果要讓光盒不隨著頁面捲軸而移動要怎麼做呢
    我在div上用fixed好像也弄不了

    Sky37042回覆:
    我這個就不會讓他跟著捲軸跑

  6. AR

    噢 那版大 如果是自己的選單呢
    我試了好多種JS去讓我的選單固定在畫面中央
    即使捲軸移動也會出現在畫面中央
    但是一直都是失敗的
    但是光盒卻是成功的
    不知道版大的JS哪一段是關鍵(小弟JS不才
    (CSS的fixed也不行

    Sky37042回覆:
    建議你移除其它JS. 懷疑是和其它的JS相衝

留言功能已關閉。