872 Style
  1. TOP
  2. MEMO
  3. WEB
  4. Highslide JS 設定方法

Highslide JS 設置方法

Highslide JS とは

サムネイル画像を拡大表示する Highslide JS はカスタマイズ性にも優れています。表示がスマートでおススメできる javascript です。
サムネールをクリックすると同一ウィンドウ上に画像を表示する Lightbox が有名ですが、Highslide は Lightbox 等のように画面の上にのせるような表示方法ではなく、サムネイルから飛び出すような表示方法となっています。
また、他の Lightbox スクリプトと違い、Highslide JS は商用利用に限り有料となっています。１つのサイトで $29 、無制限利用で $179 となっています。

Download

Highslide JS は Highslide JS のページからダウンロードすることが出来ます。
2012/09/08 の時点で最新版は 4.1.13 です。
ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

highslide-4.1.１３.zip

index.htm

./ highslide

　　highslide.css

　　highslide-ie6.css

　　highslide.js

　　highslide.min.js

　　highslide.packed.js

　　highslide-full.js

　　highslide-full.min.js

　　highslide-full.packed.js

　　highslide-with-gallery.js

　　highslide-with-gallery.min.js

　　highslide-with-gallery.packed.js

　　highslide-with-html.js

　　highslide-with-html.min.js

　　highslide-with-html.packed.js

　　./ graphics

　　　zoomin.cur

　　　zoomout.cur

　　　controlbar2.gif

　　　controlbar3.gif

　　　controlbar4.gif

　　　controlbar4-hover.gif

　　　controlbar-black-border.gif

　　　controlbar-white.gif

　　　controlbar-white-small.gif

　　　fullexpand.gif

　　　icon.gif

　　　loader.gif

　　　loader.white.gif

　　　resize.gif

　　　close.png

　　　closeX.png

　　　controlbar-text-buttons.png

　　　geckodimmer.png

　　　scrollarrows.png

　　　　./ outlines

　　　　　　beveled.png

　　　　　　drop-shadow.png

　　　　　　glossy-dark.png

　　　　　　outer-glow.png

　　　　　　Outlines.psd

　　　　　　rounded-black.png

　　　　　　rounded-white.png

./ examples

　　ajax.html

　　flash.html

　　gallery-controls-in-heading.html

　　gallery-dark.html

　　gallery-floating-caption.html

　　gallery-floating-thumbs.html

　　gallery-horizontal-strip.html

　　gallery-in-box.html

　　gallery-in-page.html

　　gallery-thumbstrip-above.html

　　gallery-vertical-strip.html

　　gallery-white.html

　　headline.html

　　html.html

　　iframe.html

　　image-map.html

　　inline.html

　　mini-galleries.html

　　mini-gallery.html

　　no-border.html

　　no-outline.html

　　outer-glow.html

　　white-10px.html

　　white-rounded-outline.html

　　youtube.html

　　./ includes

　　　　ajax.htm

　　　　include-short.htm

　　　　Flash.swf

./ images

　　nordic.gif

　　full6.jpg

　　full-image.jpg

　　gallery1.jpg

　　gallery1.thumb.jpg

　　gallery2.jpg

　　gallery2.thumb.jpg

　　gallery3.jpg

　　gallery3.thumb.jpg

　　thumb6.jpg

　　thumbnail.jpg

　　thumbstrip01.jpg ... thumbstrip24.jpg

　　thumbstrip01.thumb.png ... thumbstrip24.thumb.png

ここで必要なファイルは highslide フォルダの中味だけです。

Highslide JS を設置する

<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '/highslide/graphics/';
</script>

ダウンロードしてきた圧縮ファイルを解凍して highslide を任意の場所に置いて下さい。
上記のコードを<head>内に記入して下さい。
その際、highslide.js、highslide.css、graphics の参照先は自分の環境に合わせて変更して下さい。

Highslide JS の使い方

Highslide JS 
<a href="image.jpg" class="highslide" onclick="return hs.expand(this)"> 
<img src="thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="120" width="120" /></a>

基本の形は上記の方法になります。
onclick="return hs.expand(this)" を変更する事で、形を変える事が出来ます。 

<div class="highslide-caption">Highsilide JS Caption</div>

表示したいキャプションを<div class="highslide-caption"> で囲めば個別にキャプションを表示する事ができます。
複数ある場合には<img> タグに id を設定し、表示したいキャプションを<div>で囲み、class="highslide-caption" id="caption-for-****" をdivに記入します。その際、****には、<img> タグに設定した id を記入します。

White 10px border and drop shadow
Highslide JS
White 10px border and drop shadow
<a href="image.jpg" class="highslide" onclick="return hs.expand (this, { wrapperClassName: 'wide-border'})">
<img id="example01" src="thumbnail.jpg" height="90" width="120" alt="Highslide JS" title="Click to enlarge" />
</a>
<div class="highslide-caption" id="caption-for-example01">White 10px border and drop shadow</div>

外枠を白縁10pxで影を付けるスタイルです。
基本と違うところは onclick="return hs.expand (this, { wrapperClassName: 'wide-border'})" です。

White outline with rounded corners
Highslide JS
White outline with rounded corners
<a href="image.jpg" class="highslide" onclick="return hs.expand(this,{ outlineType: 'rounded-white' })">
<img id="example02" width="120" height="90" src="thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" />
</a>
<div class="highslide-caption">White outline with rounded corners</div>

外枠を白縁角丸にしたスタイルです。
このスタイルを使用するには、onclick を onclick="return hs.expand(this,{ outlineType: 'rounded-white' })" と記入します。

Drop shadow and no border, semi transparent close button
Highslide JS
This image also has a Mac-style close button overlaid in the top right corner.
<script type="text/javascript">
//<![CDATA[
	// The simple semitransparent close button overlay
	hs.registerOverlay({
		thumbnailId: 'example03',
		html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
		position: 'top right',
		fade: 2 // fading the semi-transparent overlay looks bad in IE
	});
//]]>
</script>

<a href="image/cat_004.jpg" class="highslide" onclick="return hs.expand(this, {wrapperClassName: 'borderless'})">
<img id="example03" src="image/cat_004_s.jpg" alt="Highslide JS" title="Click to enlarge" height="90" width="81" />
</a>
<div class="highslide-caption">This image also has a Mac-style close button overlaid in the top right corner.</div>

外枠を無くし、丸いクローズボックスを付けたスタイルです。
このスタイルを使用するには、<head> に上の Javascript を記述する必要があります。
onclick には、onclick="return hs.expand(this, {wrapperClassName: 'borderless'})" と記述します。

Caption on the right
Highslide JS
Caption on the right
You can open more than one image at a time, and arrange them on your screen by dragging them around. The captions can be positioned anywhere relative to the image. 
<a href="image/cat_005.jpg" class="highslide" onclick="return hs.expand(this, {wrapperClassName: 'wide-border', captionOverlay: { position: 'rightpanel'}})">
<img width="110" height="90" src="image/cat_005_s.jpg" alt="Highslide JS" title="Click to enlarge" />
</a>
<div class='highslide-caption' style="padding: 0 10px 10px 0">
<strong>Caption on the right</strong><br />
You can open more than one image at a time, and arrange them on your screen by dragging them around. The captions can be positioned anywhere relative to the image.
</div>

キャプションを写真の右側に付けたスタイルです。
onclick には、onclick="return hs.expand(this, {wrapperClassName: 'wide-border', captionOverlay: { position: 'rightpanel'}})"と記述します。

Green Border
BACK