Highslide:超搶眼的圖片延展特效!
蛤~ 什麼是美美的圖片延展特效!?沒聽過!?呵呵~ 沒關係,算你聰明,因為這個名稱的確是我自創的,其實我也不知道該如何來形容這個功能,所以就自創出這樣的詞彙啦!要了解它的效果,請直接點選以下的範例圖片,就可以一目了然啦!
已刪除這個功能!所以將範例拿掉!
好啦!了解我說的圖片延展特效所呈現出的效果後,就直接切入主題囉!很久以前在瀏覽網頁時,就有發現類似的圖片延展特效,點選圖片後,圖片會彈出並且出現透明的黑色背景,這樣的強化圖片主題的視覺效果非常的搶眼,是不是呢!^___^ 後來,找到了這個網站:Highslide!Highslide 提供了一系列這樣的 Javascript Thumbnails Reviewer 的原始碼,並且在官方網站上提供了詳細的教學文件!以下,先貼上有關 Highslide 的官方簡介:
Highslide JS is an open source image, media and gallery viewer written in JavaScript.
These are some of it’s advantages:
- Quick and elegant looking.
- No plugins like Flash or Java required.
- Popup blockers are no problem. The content opens within the active browser window.
- Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
- Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
- Outstanding, unconditional and free user support for both commercial and non-commercial users.
- Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.
好的,以下開始簡介安裝過程:
首先,先到Highslide Download的頁面,下載最新的 JavasScript 檔案(而我下載的是 highslide-4.1.5),值得注意的是:Highslide only free for Non-commercial website.
接著,解壓縮下載的檔案,在 highslide-4.1.5 的資料夾中,包含1個檔案與3個資料夾:
- index.htm
- examples
- highslide
- images
建議先去 examples 的資料夾中(或是到Highslide Examples 頁面上看範例!),找出你最想要安裝的圖片延展特效(或是管他三七二十一全部安裝也是可以的),我是選擇安裝 ”gallery-floating-caption” 這個效果。
而以下的說明則以 ”gallery-floating-caption” 的安裝方式為主,包含以下 4 個步驟:
Step 1: 將 highslide 資料夾中的檔案上傳至你的網路空間。(註:並非裡面的所有檔案都會使用到,只是這些檔案其實不大,所以就全部上傳囉!)
Step 2: 將以下的程式碼加入到你的 head 標籤中,請注意索引檔案路徑的正確性!
Step 3: 接著,將這段 Javascript 程式碼加入到你的 head 標籤中(緊接著上面那兩項索引用的程式碼)。這段程式碼要特別注意 hs.graphicsDir 路徑要正確的指向 /highslide/graphics/ !
Step 4: 最後,以下這段程式碼則是說明要如何將圖片放在 body 的標籤中。在這段程式碼中,要注意圖片一定要放在 div class=”highslide-gallery” 的標簽內。
最後,補充一點:在 highslide-with-gallery.js 中,有幾個參數是可以修改的,如以下的程式碼所示:
var hs = {
// Language strings
lang : {
cssDirection: 'ltr',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
focusTitle : 'Click to bring to front',
fullExpandTitle : 'Expand to actual size (f)',
creditsText : 'Owned by <i>Allen Yang</i>',
creditsTitle : 'Back to homepage',
previousText : 'Previous',
nextText : 'Next',
moveText : 'Move',
closeText : 'Close',
closeTitle : 'Close (esc)',
resizeTitle : 'Resize',
playText : 'Play',
playTitle : 'Play slideshow (spacebar)',
pauseText : 'Pause',
pauseTitle : 'Pause slideshow (spacebar)',
previousTitle : 'Previous (arrow left)',
nextTitle : 'Next (arrow right)',
moveTitle : 'Move',
fullExpandText : '1:1',
number: 'Image %1 of %2',
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.'
},
// See http://highslide.com/ref for examples of settings
graphicsDir : 'highslide/graphics/',
expandCursor : 'zoomin.cur', // null disables
restoreCursor : 'zoomout.cur', // null disables
expandDuration : 250, // milliseconds
restoreDuration : 250,
marginLeft : 15,
marginRight : 15,
marginTop : 15,
marginBottom : 15,
zIndexCounter : 1001, // adjust to other absolutely positioned elements
loadingOpacity : 0.75,
allowMultipleInstances: true,
numberOfImagesToPreload : 5,
outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
outlineStartOffset : 3, // ends at 10
padToMinWidth : true, // pad the popup width to make room for wide caption
fullExpandPosition : 'bottom right',
fullExpandOpacity : 1,
showCredits : true, // you can set this to false if you want
creditsHref : 'http://blog.4evervoyage.net/',
enableKeyListener : true,
openerTagNames : ['a'], // Add more to allow slideshow indexing
transitions : [],
transitionDuration: 250,
dimmingOpacity: 0, // Lightbox style dimming background
dimmingDuration: 50, // 0 for instant dimming
anchor : 'auto', // where the image expands from
align : 'auto', // position in the client (overrides anchor)
targetX: null, // the id of a target element
targetY: null,
dragByHeading: true,
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : 'drop-shadow', // set null to disable outlines
wrapperClassName : 'highslide-wrapper', // for enhanced css-control
skin : {
controls:
'<div class="highslide-controls"><ul>'+
'<li class="highslide-previous">'+
'<a href="#" title="{hs.lang.previousTitle}">'+
'<span>{hs.lang.previousText}</span></a>'+
'</li>'+
'<li class="highslide-play">'+
'<a href="#" title="{hs.lang.playTitle}">'+
'<span>{hs.lang.playText}</span></a>'+
'</li>'+
'<li class="highslide-pause">'+
'<a href="#" title="{hs.lang.pauseTitle}">'+
'<span>{hs.lang.pauseText}</span></a>'+
'</li>'+
'<li class="highslide-next">'+
'<a href="#" title="{hs.lang.nextTitle}">'+
'<span>{hs.lang.nextText}</span></a>'+
'</li>'+
'<li class="highslide-move">'+
'<a href="#" title="{hs.lang.moveTitle}">'+
'<span>{hs.lang.moveText}</span></a>'+
'</li>'+
'<li class="highslide-full-expand">'+
'<a href="#" title="{hs.lang.fullExpandTitle}">'+
'<span>{hs.lang.fullExpandText}</span></a>'+
'</li>'+
'<li class="highslide-close">'+
'<a href="#" title="{hs.lang.closeTitle}" >'+
'<span>{hs.lang.closeText}</span></a>'+
'</li>'+
'</ul></div>'
},
www
October 9, 2009 @ 10:02 PM
請問步驟二的hesd標籤應該在哪一檔案上修改?
謝謝您!!!!!!
Step 2: 將以下的程式碼加入到你的 head 標籤中,請注意索引檔案路徑的正確性!
yangluenwei
October 10, 2009 @ 12:01 AM
恩~ 在你的主要頁面的檔案中應該就可以找到head標簽。如果你也是使用wordpress,通常可以在header.php中可以找到head標簽。
聿
April 21, 2010 @ 3:03 AM
請位版主
效果要如何安裝= =?
我很喜歡gallery-floating-caption這個效果
但是我去官網只看見預覽範例,卻不知如何下載js檔
希望版主願意指點我 或是傳js黨給我
我的信箱w0801w@yahoo.com.tw 我會非常的 感謝你><
Allen Yang
April 21, 2010 @ 11:59 AM
hi
下載頁面:http://highslide.com/download.php
另,後來我發現highslide有提供線上編輯器:http://highslide.com/editor/
如有安裝上的其他問題,歡迎再跟我聯絡。^^