♡゜來玩我♥cameplayme゜♡

點擊圖片在原視窗以彈出小視窗呈現圖片放大

此篇文章屬於　　所有　　

提供圖片方便瀏覽（熱鍵）的選項和縮放ajax、flash、Iframed等檔案...諸如此類效果的ｊｓ檔案。

Compatibility

IE6Firefox

Examples

效果１	效果２	效果３

部落格用教學

Ｓｔｅｐ１.

下載壓縮檔

解壓縮之後有「highslide」、「images」兩個資料夾跟一堆html的範例

Ｓｔｅｐ２.

把「highslide資料夾」上傳至可以外連且能放資料夾的固定網路域名空間

例如：Hinet的http://XXX.myweb.hinet.net/固定域名，沒有怎麼辦？來看看miroko網路空間教學

Ｓｔｅｐ３.

複製你要的效果程式碼 ↓ 貼回部落格的自訂欄位，參考：各大部落格語法放置教學

效果１程式碼

a.highslide-full-expand {
    background: url(你的網路網址/highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
</style>

效果２程式碼 <script type="text/javascript" src="你的網路網址/highslide/highslide-with-gallery.js"></script> <script type="text/javascript"> hs.graphicsDir = '你的網路網址/highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'rounded-white'; hs.fadeInOut = true; //hs.dimmingOpacity = 0.75; // Add the controlbar if (hs.addSlideshow) hs.addSlideshow({ //slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } }); </script> <style type="text/css"> .highslide-container div { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide { cursor: url(你的網路網址/highslide/graphics/zoomin.cur), pointer; outline: none; text-decoration: none; } .highslide img { border: 2px solid silver; } .highslide:hover img { border-color: gray; } .highslide-active-anchor img, .highslide-active-anchor:hover img { border-color: black; } .highslide-image { border-width: 2px; border-style: solid; border-color: white; background: gray; } .highslide-wrapper, .rounded-white { background: white; } .highslide-image-blur { } .highslide-caption { display: none; border-top: none; font-size: 1em; padding: 5px; background: white; } .highslide-heading { display: none; font-weight: bold; margin-bottom: 0.4em; } .highslide-dimming { position: absolute; background: black; } .highslide-loading { display: block; color: black; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border: 1px solid white; background-color: white; padding-left: 22px; background-image: url(你的網路網址/highslide/graphics/loader.white.gif); background-repeat: no-repeat; background-position: 3px 1px; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } /* Controls. See http://www.google.com/search?q=css+sprites */ .highslide-controls { width: 195px; height: 40px; background: url(你的網路網址/highslide/graphics/controlbar-white.gif) 0 -90px no-repeat; margin-right: 15px; margin-bottom: 10px; margin-top: 20px; } .highslide-controls ul { position: relative; left: 15px; height: 40px; list-style: none; margin: 0; padding: 0; background: url(你的網路網址/highslide/graphics/controlbar-white.gif) right -90px no-repeat; } .highslide-controls li { float: left; padding: 5px 0; } .highslide-controls a { background-image: url(你的網路網址/highslide/graphics/controlbar-white.gif); display: block; float: left; height: 30px; width: 30px; outline: none; } .highslide-controls a.disabled { cursor: default; } .highslide-controls a span { /* hide the text for these graphic buttons */ display: none; } .highslide-move a { cursor: move; } /* The CSS sprites for the controlbar */ .highslide-controls .highslide-previous a { background-position: 0 0; } .highslide-controls .highslide-previous a:hover { background-position: 0 -30px; } .highslide-controls .highslide-previous a.disabled { background-position: 0 -60px !important; } .highslide-controls .highslide-play a { background-position: -30px 0; } .highslide-controls .highslide-play a:hover { background-position: -30px -30px; } .highslide-controls .highslide-play a.disabled { background-position: -30px -60px !important; } .highslide-controls .highslide-pause a { background-position: -60px 0; } .highslide-controls .highslide-pause a:hover { background-position: -60px -30px; } .highslide-controls .highslide-next a { background-position: -90px 0; } .highslide-controls .highslide-next a:hover { background-position: -90px -30px; } .highslide-controls .highslide-next a.disabled { background-position: -90px -60px !important; } .highslide-controls .highslide-move a { background-position: -120px 0; } .highslide-controls .highslide-move a:hover { background-position: -120px -30px; } .highslide-controls .highslide-full-expand a { background-position: -150px 0; } .highslide-controls .highslide-full-expand a:hover { background-position: -150px -30px; } .highslide-controls .highslide-full-expand a.disabled { background-position: -150px -60px !important; } .highslide-controls .highslide-close a { background-position: -180px 0; } .highslide-controls .highslide-close a:hover { background-position: -180px -30px; } </style>

效果３程式碼 <script type="text/javascript" src="你的網路網址/highslide/highslide-with-gallery.js"></script> <script type="text/javascript"> hs.graphicsDir = '你的網路網址/highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'glossy-dark'; hs.fadeInOut = true; //hs.dimmingOpacity = 0.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> <style type="text/css"> .highslide-container div { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide { cursor: url(你的網路網址/highslide/graphics/zoomin.cur), pointer; outline: none; text-decoration: none; } .highslide img { border: 2px solid silver; } .highslide:hover img { border-color: gray; } .highslide-active-anchor img, .highslide-active-anchor:hover img { border-color: black; } .highslide-image { border-width: 2px; border-style: solid; border-color: black black #202020 black; background: gray; } .highslide-wrapper, .glossy-dark { background: #111; } .highslide-image-blur { } .highslide-caption { display: none; border-top: none; font-size: 1em; padding: 5px; color: white; background: #111; } .highslide-heading { display: none; color: white; font-size: 1.2em; font-weight: bold; margin-bottom: 0.4em; } .highslide-dimming { position: absolute; background: black; } .highslide-loading { display: block; color: white; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border-top: 1px solid white; border-bottom: 1px solid white; background-color: black; /* padding-left: 22px; background-image: url(你的網路網址/highslide/graphics/loader.gif); background-repeat: no-repeat; background-position: 3px 1px; */ } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-move a { cursor: move; } /* Controls. See http://www.google.com/search?q=css+sprites */ .highslide-controls { width: 195px; height: 40px; background: url(你的網路網址/highslide/graphics/controlbar-black-border.gif) 0 -90px no-repeat; margin-right: 15px; margin-bottom: 10px; margin-top: 20px; } .highslide-controls ul { position: relative; left: 15px; height: 40px; list-style: none; margin: 0; padding: 0; background: url(你的網路網址/highslide/graphics/controlbar-black-border.gif) right -90px no-repeat; } .highslide-controls li { float: left; padding: 5px 0; } .highslide-controls a { background: url(你的網路網址/highslide/graphics/controlbar-black-border.gif); display: block; float: left; height: 30px; width: 30px; outline: none; } .highslide-controls a.disabled { cursor: default; } .highslide-controls a span { /* hide the text for these graphic buttons */ display: none; } /* The CSS sprites for the controlbar */ .highslide-controls .highslide-previous a { background-position: 0 0; } .highslide-controls .highslide-previous a:hover { background-position: 0 -30px; } .highslide-controls .highslide-previous a.disabled { background-position: 0 -60px !important; } .highslide-controls .highslide-play a { background-position: -30px 0; } .highslide-controls .highslide-play a:hover { background-position: -30px -30px; } .highslide-controls .highslide-play a.disabled { background-position: -30px -60px !important; } .highslide-controls .highslide-pause a { background-position: -60px 0; } .highslide-controls .highslide-pause a:hover { background-position: -60px -30px; } .highslide-controls .highslide-next a { background-position: -90px 0; } .highslide-controls .highslide-next a:hover { background-position: -90px -30px; } .highslide-controls .highslide-next a.disabled { background-position: -90px -60px !important; } .highslide-controls .highslide-move a { background-position: -120px 0; } .highslide-controls .highslide-move a:hover { background-position: -120px -30px; } .highslide-controls .highslide-full-expand a { background-position: -150px 0; } .highslide-controls .highslide-full-expand a:hover { background-position: -150px -30px; } .highslide-controls .highslide-full-expand a.disabled { background-position: -150px -60px !important; } .highslide-controls .highslide-close a { background-position: -180px 0; } .highslide-controls .highslide-close a:hover { background-position: -180px -30px; } </style>

解析 ↑ 你的網路網址改成你的網路空間位址，例如：http://XXX.myweb.hinet.net/

Ｓｔｅｐ４.

複製語法↓回到發表文章，以"純文字"模式編輯貼上，B的語法視需求加入

A.貼圖的語法 <a id="thumb1" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )"><img src="圖片網址" width="圖寬" height="圖高"/></a>

解析 ↑ , align: 'center'開出來的圖將會置中在螢幕中央，不需要就刪除這段

B.加文字語法 <div class='highslide-caption' id='caption1'> 圖片上加的文字註解 </div>

解析 ↑ caption1的數字必須跟A裡thumb1的數字一樣

Ｓｔｅｐ５.

加上第二張圖片，複製A跟B的語法後，將thumb1跟caption1改成thumb2跟thumb2

第二張圖片語法範例 ↓數字１→２，增加圖片以此類推。

<div class='highslide-caption' id='caption2'>圖片上加的文字註解</div>

Ｓｔｅｐ６.

隱藏新增的自訂欄位

６-１.

在部落格原始檔搜尋新增版位的標題找到CSS標籤

我在新增版位時的標題設為"圖片放大效果"，依以下步驟找到CSS標籤：

我的部落格→檢視→原始檔→搜尋(Ctrl+F )"圖片放大效果"↓

<div class="hslice box folder" id="box748104">
<h4 class="box-title entry-title">圖片放大效果</h4>

解析 ↑ box748104就是我的自訂欄位的CSS標籤

６-２.

複製語法↓貼回你的CSS裡

#box748104{display:none;}

解析 ↑ box748104改成你的CSS標籤

網頁用教學

Ｓｔｅｐ１.	下載壓縮檔
	解壓縮之後有「highslide」、「images」兩個資料夾跟一堆html的範例
Ｓｔｅｐ２.	把「highslide資料夾」上傳至可以外連且能放資料夾的固定網路域名空間
	例如：Hinet的http://XXX.myweb.hinet.net/固定域名，沒有怎麼辦？來看看miroko網路空間教學
Ｓｔｅｐ３.	複製網頁用程式碼↓貼到<head>跟</head>之間
	網頁用程式碼 <script type="text/javascript" src="你的網路網址/highslide/highslide.js"></script> <script type="text/javascript"> // remove the registerOverlay call to disable the controlbar hs.registerOverlay( { thumbnailId: null, overlayId: 'controlbar', position: 'top right', hideOnMouseOut: true } ); hs.graphicsDir = '你的網路網址/highslide/graphics/'; hs.outlineType = 'rounded-white'; // Tell Highslide to use the thumbnail's title for captions hs.captionEval = 'this.thumb.title'; </script> <style type="text/css"> * { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide { cursor: url(你的網路網址/highslide/graphics/zoomin.cur), pointer; outline: none; } .highslide-active-anchor img { visibility: hidden; } .highslide img { border: 2px solid gray; } .highslide:hover img { border: 2px solid white; } .highslide-wrapper { background: white; } .highslide-image { border: 2px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border: 2px solid white; border-top: none; font-family: Verdana, Helvetica; font-size: 10pt; padding: 5px; background-color: white; } .highslide-loading { display: block; color: black; font-size: 8pt; font-family: sans-serif; font-weight: bold; text-decoration: none; padding: 2px; border: 1px solid black; background-color: white; padding-left: 22px; background-image: url(你的網路網址/highslide/graphics/loader.white.gif); background-repeat: no-repeat; background-position: 3px 1px; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-move { cursor: move; } .highslide-overlay { display: none; } a.highslide-full-expand { background: url(你的網路網址/highslide/graphics/fullexpand.gif) no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px; } /* Controlbar example / .controlbar { background: url(你的網路網址/highslide/graphics/controlbar4.gif); width: 167px; height: 34px; } .controlbar a { display: block; float: left; /margin: 0px 0 0 4px;/ height: 27px; } .controlbar a:hover { background-image: url(你的網路網址/highslide/graphics/controlbar4-hover.gif); } .controlbar .previous { width: 50px; } .controlbar .next { width: 40px; background-position: -50px 0; } .controlbar .highslide-move { width: 40px; background-position: -90px 0; } .controlbar .close { width: 36px; background-position: -130px 0; } / Necessary for functionality */ .highslide-display-block { display: block; } .highslide-display-none { display: none; } </style> 　解析 ↑ 你的網路網址改成你的網路空間位址，例如：http://XXX.myweb.hinet.net/
Ｓｔｅｐ４.	複製語法↓貼到<body>跟</body>之間
	貼數張圖語法 <div> <a id="thumb1" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )" href="圖片網址" mce_href="圖片網址"><img src="圖片網址" mce_src="圖片網址" alt="" width="圖片寬" height="圖片高" /></a> <a id="thumb1" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )" href="圖片網址" mce_href="圖片網址"><img src="圖片網址" mce_src="圖片網址" alt="" title="圖片說明" width="圖片寬" height="圖片高" /></a> <a id="thumb1" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )" href="圖片網址" mce_href="圖片網址"><img src="圖片網址" mce_src="圖片網址" alt="" width="圖片寬" height="圖片高" /></a> <a id="thumb1" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )" href="圖片網址" mce_href="圖片網址"><img src="圖片網址" mce_src="圖片網址" alt="" title="圖片說明" width="圖片寬" height="圖片高" /></a> <div id="controlbar" class="highslide-overlay controlbar" style="width: 167px; height: 34px"> <a href="#" mce_href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a> <a href="#" mce_href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a> <a href="#" mce_href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a> <a href="#" mce_href="#" class="close" onclick="return hs.close(this)" title="Close"></a> </div> </div> 解析 ↑ , align: 'center'開出來的圖將會置中在螢幕中央，不需要就刪除這段解析 ↑ <a id="thumb1" .... height="圖片高" /></a> 增加這段可加圖片，反之，則刪減。解析 ↑ title="圖片說明" 圖片加入文字語法

變更圖片的設定值

參考文章

來玩我C.M.P 發表在痞客邦留言(0) 人氣()

♡゜來玩我♥cameplayme゜♡

隨意玩*隨意記

教學│圖片在原視窗放大"Highslide

訂閱RSS

玩我新概念

玩我高收視

玩我分級制

美容彩妝 (2)

旅遊美食記 (2)

玩玩部落格 (2)

玩我時光機

玩我搜搜搜

玩我錄音機

玩我測數器

QR Code