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:

1. Quick and elegant looking.
2. No plugins like Flash or Java required.
3. Popup blockers are no problem. The content opens within the active browser window.
4. Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
5. 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.
6. Outstanding, unconditional and free user support for both commercial and non-commercial users.
7. 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個資料夾：

1. index.htm
2. examples
3. highslide
4. 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>'
},