ドラッグできる画像拡大ライブラリ「Highslide JS」

Check このエントリーをはてなブックマークに追加

配布元：Highslide JS
ライセンス：Creative Commons Attribution-NonCommercial 2.5 License(個人利用は無料、商用利用時は$29～)

Highslide JSはドラッグ可能な画像拡大のJavaScriptライブラリです。

利用方法

ダウンロードしたhighslide.jsとhighslide.cssをhead要素内などで読み込みます。

<script type="text/javascript" src="./highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="./highslide/highslide.css" />

利用したいスタタイルのJavaScirptとCSSファイルをダウンロードしたexampleファイル内の記述からコピーして利用します。
(以下はexample-white-10px.htmlの例)

ライブラリの部品画像はscript要素内でhs.graphicsDirという変数で定義されているので変更する場合はここを変更してください。

クリックした際に拡大したい画像(もしくはクリックした際に画像を表示したいテキスト)をa要素で包みます。

a要素のhref属性に拡大後の画像のパス、class属性に「highslide」という値、onclick属性に「return hs.expand(this)」と定義します。
画像のキャプションはa要素の直後にhighslide-captionというclassを定義したdiv要素を配置してその中に記述します。

<a href="images/image-1.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/image-1-s.jpg" alt=" " />
	</a>
<div class="highslide-caption">キャプション</div>

サンプル

ギャラリーモードでの利用

ギャラリーモードで利用する場合はhighslide-with-gallery.jsを読み込みます。

<ascript type="text/javascript" src="highslide/highslide-with-gallery.js"></script>

設定はexample-galleryファイル内のCSSとJavaScriptの記述をコピーして利用します。

img要素の設定は通常と同じです。

サンプル

スポンサードリンク

コメント

カテゴリー：ライブラリ 拡大 画像