小粋空間: Highslide JS アーカイブ

Top ＞ Highslide JS [全て閉じる]

2011年10月31日

Highslide JSの動作やスタイルを簡単に設定できる「Highslide Editor」の徹底解説

October 31,2011 1:55 AM
Tag：[HighSlide]
Permalink

ウェブサイトに掲載するサムネイル画像の拡大には「Highslide JS」が非常に便利ですが、多機能なせいか、動作やスタイルの指定が結構面倒です。

それらを解消するための「Highslide Editor」がいつの間にかリリースされていたので、利用方法を本エントリーでがっつり紹介します。

Highslide Editor

１．概要

ここでは「Highslide Editor」の使い方に関するおおざっぱな流れを説明します。詳細な機能については２項で説明します。

「Highslide JS」の左メニューにある「Editor」をクリック。

Highslide JS

「Welcome to the Highslide Editor」の画面が開くので、下にある「Get started!」か右上の×印をクリック。

左ペインで各種設定を行います。左ペイン上部のタブで設定項目を切り替えます。左ペイン上部の「Get link」は現在の設定状態をURLで取得できます。また必要に応じて左ペイン下にヘルプが表示されます。右ペインで設定項目のプレビューを行えます。詳細は２項以降で解説します。

設定が完了したら、右ペイン上部にある「Publish」で一式をダウンロードできます。「Publish」右にある「View ～」でHTML/CSS/JavaScriptの設定内容を確認できます。

Publish
Highslide Editorのサイトにアクセス。
http://highslide.com/editor/

ダイアログが表示されるのでライセンスを確認して、商用の場合は「Buy Now」で購入してください。ライセンスを確認したら、下の「Yes」をクリック。

Step1の「Upload your files via FTP」または「Download a zip archive」をクリックすれば、ファイルを取得できます。「Upload your files via FTP」をクリックするとさらに画面が開き、FTPの情報を設定します。あとはStep2の内容を利用するページのhead要素に設定します。Step3はプレビュー時のHTMLなので、そのままペーストする必要はないでしょう。

２．各種設定（Generalタブ）

「Generalタブ」では、使用言語と、ロードするサンプルを選択します。なお、各種設定は右ペインの画像をポップアップした状態で行えば、即座に変更を確認することができます。３項以降のタブでも同様です。

Generalタブ

選択したサンプルによってプレビューの表示が切り替わります。下は「Gallery: Basic dark」を選択した例です。右ペインがギャラリーに切り替わります。

画像をクリックすると元画像を黒背景でポップアップします。

３．各種設定（Galleryタブ）

「Galleryタブ」では、ギャラリーに関する設定を行います。

Galleryタブ

各項目の意味は次のとおりです。

General: Enable gallery：ギャラリー設定を有効にする
Controls: Preset style：コントロール（ギャラリーの戻る・進む・閉じるボタンなどをまとめたもの）のスタイルを指定
Numbers: Position：ギャラリーの画像番号の表示・非表示あるいは表示位置を指定
Thumbstrip: Thumbstrip：ギャラリーのサムネイル表示を有効にする; Mode：サムネイルの表示方法を指定; Position：サムネイルの表示位置を指定; Thumb size：サムネイルの表示サイズを指定
Behaviour: Image position：チェックすれば、ギャラリーの画像を切り替えたときに（画像サイズが変わっても）コントロールの位置を固定; Repeat slideshow：ギャラリーの最初と最後の画像のコントロールに、循環できる矢印キーを表示

４．各種設定（HTMLタブ）

「HTMLタブ」では、Highslide JSでHTMLを表示する動作に関する設定を行います。

HTMLタブ

各項目の意味は次のとおりです。

Enable: Inline HTML：HTMLの表示を許容（プレビューにリンクを追加）; Ajax：AjaxによるHTMLの表示を許容（〃）; Iframe：iframeによるHTMLの表示を許容（〃）; Flash：Flashの表示を許容（〃）
Size: Width：幅を指定
Controls: Previous：コントロールに「戻る」アイコンを追加; Next：コントロールに「進む」アイコンを追加; Move：コントロールに「移動」アイコンを追加; Close：コントロールに「閉じる」アイコンを追加; Resize：コントロールに「リサイズ」アイコンを追加
Title bar: Title Source：チェックすればタイトルバーを表示。プルダウンで表示タイトルにする元データを設定

５．各種設定（Styleタブ）

「Styleタブ」では、Highslide JSでHTMLを表示する動作に関する設定を行います。

Styleタブ

各項目の意味は次のとおりです。

Thumbnail: Explanation label：サムネイルの下に説明の表示・非表示、あるいは表示方法を指定
Loading style: Label style：画像ロード中のラベル表示方法を指定（Previewをチェックして表示を確認可能）
Popup styles: Background：ポップアップ時の背景を指定
Dimming: Apply page dimming mask：ポップアップ時に（Lightboxのように）サイト全体を暗くする

６．各種設定（Behaviourタブ）

「Behaviourタブ」では、ポップアップ画像の振舞いに関する設定を行います。

Behaviourタブ

各項目の意味は次のとおりです。

Animation: Easing：ポップアップの方法; Hide thumbnail on expand (not gallery)：ポップアップ時に元のサムネイルを隠す
Popup size and alignment: Alignment：ポップアップする位置; Fit viewport：ブラウザの幅に合わせてポップアップ; Small images：最小幅に詰める
Advanced behaviour: Allow multiple popups at the same time：複数画像のポップアップを許容; Block right clicks on the popup image：ポップアップ画像の右クリックをブロック; Enable shortcut keys：ショートカットキーを許容; Number of images to preload：プリロードする画像の数

７．各種設定（Overlaysタブ）

「Overlaysタブ」では、ポップアップ画像の表示に関する設定を行います。

Overlaysタブ

各項目の意味は次のとおりです。

Caption: Source：チェックすればポップアップ画像にキャプションを表示。Sourceでキャプションの表示データを指定; Position：キャプションの表示位置を指定
Heading: Source：チェックすればポップアップ画像にヘッダを表示。Sourceでキャプションの表示データを指定; Position：ヘッダの表示位置を指定; Drag by heading：ヘッダ部分でのドラッグを許容
Close button: Style：チェックすれば「閉じる」ボタンを表示。Styleで表示スタイルを指定
Show credits: Position：チェックすれば「Highslide JS」のクレジットを表示。Positionで表示位置を指定

８．その他

設定項目にはさらに詳細設定できるものもありますが、前述までの説明で、どの項目がどの部分に対応するかが理解できたと思いますので、後はきめこまかく設定を行うだけです。

ということで是非「Highslide Editor」を使ってみてください。

Comments [0] | Trackbacks [0]

2010年7月 6日

Highslide JSのキャプションのスタイルを調整する

July 6,2010 2:55 AM
Tag：[Customize, HighSlide]
Permalink

Highslide JSのキャプションのスタイルを調整するカスタマイズです。ご質問を頂きましたので本エントリーで紹介致します。

カスタマイズ内容はピンポイントですが、「Highslide JS でサムネイル画像を拡大表示する」の「White 10px border and drop shadow（ボーダー・角・影つき）」のキャプションの高さの調整です。修正後はキャプションの上下の空白を狭くします。

修正前

修正後

修正したHighSlide JSのバージョンは4.1.9です。

１．スタイルシートの修正

highslide/highslide.cssの441行目の「.wide-border .highslide-caption」のpaddingを変更します。

変更前

.wide-border .highslide-caption {
    padding: 0 10px 10px 10px;
}

変更後

.wide-border .highslide-caption {
    padding: 0 10px 0px 10px;
}

２．JavaScriptの修正

highslide/highslide.jsの1675行目あたりの内容を、次のように書き換えます。

変更前

…前略…
} else if (/^below$/.test(p)) {
    hs.setStyles(overlay, {
        position: 'relative',
        left: (- this.x.p1 - this.x.cb) +'px',
        right: (- this.x.p2 - this.x.cb) +'px',
        top: '100%',
        marginTop: this.y.cb +'px',
        width: 'auto'
    });
    this.y.p2 = overlay.offsetHeight;
    overlay.style.position = 'absolute';
}
…後略…

変更後

…前略…
} else if (/^below$/.test(p)) {
    hs.setStyles(overlay, {
        position: 'relative',
        left: (- this.x.p1 - this.x.cb) +'px',
        right: (- this.x.p2 - this.x.cb) +'px',
        top: '100%',
        marginTop: '5px',
        width: 'auto'
    });
    this.y.p2 = overlay.offsetHeight;
    overlay.style.position = 'absolute';
}
…後略…

Comments [0] | Trackbacks [0]

2009年8月19日

CommentCustomField プラグイン + HighSlide JS

August 19,2009 1:55 AM
Tag：[Comment, CommentCustomField, MovableType, Plugin]
Permalink

Movable Type のコメントにカスタムフィールドを追加する CommentCustomField プラグインと HighSlide JS を組み合わせて、アップロードした画像をズームアップするカスタマイズを紹介します。

以下のサンプルページで画像をクリックして動作を確認してください。

ここでは CommentCustomField プラグインの解説にしたがって、ブログ記事ページにアップロード画像を表示するカスタマイズを行なっていることを前提に説明を進めます。

１．HighSlide JS の設定

HighSlide JS の設定方法は、「Highslide JS でサムネイル画像を拡大表示する」を参照してください。本エントリーでの解説は省略します。

２．テンプレートの修正

ブログ管理画面の「デザイン」→「テンプレート」をクリックし、「既定のブログ」の場合は「コメント」テンプレートモジュールをクリック、当ブログの配布テンプレートの場合は「コメント詳細」テンプレートモジュールをクリックし、赤色部分を青色の内容に変更します。

変更前

...前略...
<mt:Comments>
...中略...
    <div class="comment-content">
        <$mt:CommentBody$>
        <mt:if tag="CommentCustomFieldAsset">
            <p>
            <mt:CommentCustomFieldAsset>
                <mt:AssetThumbnailLink width="200" />
            </mt:CommentCustomFieldAsset>
            </p>
        </mt:if>
...中略...
    </div>
</mt:Comments>
...後略...

変更後

...前略...
<mt:Comments>
...中略...
    <div class="comment-content">
        <$mt:CommentBody$>
        <mt:if tag="CommentCustomFieldAsset">
            <p>
            <mt:CommentCustomFieldAsset>
                <a href="<mt:AssetURL />" class="highslide" onclick="return hs.expand(this)"><img src="<mt:AssetThumbnailURL width="100" />" /></a>
            </mt:CommentCustomFieldAsset>
            </p>
        </mt:if>
...中略...
    </div>
</mt:Comments>
...後略...

ズーム前のサイズを変更する場合は、width="100" の部分を書き換えてください。

Comments [0] | Trackbacks [0]

2009年7月 7日

Highslide JS のギャラリーモード

July 7,2009 12:03 AM
Tag：[HighSlide, JavaScript]
Permalink

Highslide JS の新しいバージョンではスライドショー機能がいくつか組み込まれており、その中のサンプルにある「With Gallery - Gallery in the parent page without Highlslide popping up at all」に関して設定方法のご質問を頂いたので、分かる範囲で解説します。

サンプルの具体的な動作については、下のリンク先でお試しください。

Gallery in the parent page without Highlslide popping up at all のサンプル

以下、設定方法を紹介します。なお、本記事の設定を行なう前に、Highslide JS 本体のダウンロードとインストールについて、「Highslide JS でサムネイル画像を拡大表示する」の２項までの作業を事前に行なってください。

また、このカスタマイズが有効な Highslide JS のバージョンは、4.1 以降です。4.0.x にはこのエントリーで紹介する機能はありません。

１．script 要素と link 要素の設定

head 要素の終了タグの前に、Highslide のJavaScript ライブラリと CSS をインクルードするための、下記の内容を追加します。

<script type="text/javascript" src="[highslideディレクトリまでのURL]/highslide/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="[highslideディレクトリまでのURL]/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="[highslideディレクトリまでのURL]/highslide/highslide/highslide-ie6.css" />
<![endif]-->

Movable Type の場合であれば、次のように設定すると良いでしょう。

<script type="text/javascript" src="<$mt:BlogURL$>highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>highslide/highslide-ie6.css" />
<![endif]-->

２．オプションの設定

スライドショーの設定のために、下記の内容を１項で追加した内容の直後に追加します。

<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = '../highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
 
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: true,
    useControls: true,
    overlayOptions: {
        position: 'bottom right',
        offsetY: 50
    },
    thumbstrip: {
        position: 'above',
        mode: 'horizontal',
        relativeTo: 'expander'
    }
});
 
// Options for the in-page items
var inPageOptions = {
    //slideshowGroup: 'group1',
    outlineType: null,
    allowSizeReduction: false,
    wrapperClassName: 'in-page controls-in-heading',
    useBox: true,
    width: 600,
    height: 400,
    targetX: 'gallery-area 10px',
    targetY: 'gallery-area',
    captionEval: 'this.thumb.alt',
    numberPosition: 'caption'
}
 
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
    document.getElementById('thumb1').onclick();
});
 
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
    if (/in-page/.test(this.wrapper.className))    return hs.next();
}
 
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
    if (/in-page/.test(this.wrapper.className))    return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
    if (/in-page/.test(this.wrapper.className))    return false;
}
 
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
    var i, exp;
    hs.page = hs.getPageSize();
 
    for (i = 0; i < hs.expanders.length; i++) {
        exp = hs.expanders[i];
        if (exp) {
            var x = exp.x,
                y = exp.y;
 
            // get new thumb positions
            exp.tpos = hs.getPosition(exp.el);
            x.calcThumb();
            y.calcThumb();
 
            // calculate new popup position
             x.pos = x.tpos - x.cb + x.tb;
            x.scroll = hs.page.scrollLeft;
            x.clientSize = hs.page.width;
            y.pos = y.tpos - y.cb + y.tb;
            y.scroll = hs.page.scrollTop;
            y.clientSize = hs.page.height;
            exp.justify(x, true);
            exp.justify(y, true);
 
            // set new left and top to wrapper and outline
            exp.moveTo(x.pos, y.pos);
        }
    }
});
//]]>
</script>

hs.addSlideshow の主なオプションの意味は次の通りです。

interval：自動切換え時のインターバルです。単位はmsで、1000より小さいと正常に動作しない可能性があります。
repeat：自動切換え時に繰り返す場合は true、繰り返さない場合は false を設定します。
useControls：「再生・進む・戻る」のコントローラーを表示する場合は ture、表示しない場合は false を設定します。
overlayOptions：useControls が true の場合、コントローラーの表示位置を設定します。position は水平方向・垂直方向の位置を top/bottom および left/right で設定します。offsetY は垂直方向のオフセット、offsetX は水平方向のオフセットを数値で設定します。マイナス値も利用可能です。
thumbstrip：サムネイル画像の表示位置を設定します。position は上下の表示位置を above/below で設定します。mode は水平・垂直を horizontal/vertical で設定します。

inPageOptions の主なオプションの意味は次の通りです。

allowSizeReduction：全体の表示サイズを変更する場合は true、変更しない場合は false を設定します。false を設定すると、元画像のサイズは最適化されず、原寸で表示します。
width：表示領域の幅を指定します（=表示する画像の最大幅）。
height：表示領域の高さを指定します（=表示する画像の最大の高さ）。
targetX：表示領域の id 属性を指定します。
targetY：表示領域の id 属性を指定します。
captionEval：キャプションとして使用する属性を指定します。

注意点は、

３．スライドショー表示用のXHTML設定

ブログ記事やテンプレートに、下記のXHTMLを設定します。1つめの div 要素の中に、４項に示す画像リンクを記述し、それらが、2つめの div 要素の位置に表示されます。

<div class="hidden-container">
（４項の内容を記述）
</div>
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div>

2つめの div 要素の id 属性 gallery-area は、２項で設定した、下記の赤色部分と一致している必要があります。

...前略...
// Options for the in-page items
var inPageOptions = {
    //slideshowGroup: 'group1',
    outlineType: null,
    allowSizeReduction: false,
    wrapperClassName: 'in-page controls-in-heading',
    useBox: true,
    width: 600,
    height: 400,
    targetX: 'gallery-area 10px',
    targetY: 'gallery-area',
    captionEval: 'this.thumb.alt',
    numberPosition: 'caption'
}
...後略...

style 属性は特に記述する必要はありません（サンプルの内容を流用しているだけです）。そのまま利用してサイズを変更したい場合、width の値は、上に示した inPageOptions の中にある width より 20px、height の値は 120px 増やした値であれば揃うと思います。

４．画像リンクの設定

1番目の画像リンクは次のように記述します。

<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>

id 属性の thumb1 は、２項で設定した次の赤色部分と一致している必要があります。

...前略...
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
    document.getElementById('thumb1').onclick();
});
...後略...

2番目以降の画像リンク（青色）は、1番目の画像リンクに続けて記述してください。2番目以降には id 属性は不要です。

<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>
<a class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>
...以下同様...

画像ファイル名に制約はありません。

５．注意事項

サムネイルをクリックして元の画像ファイルが見つからない場合、ローディング画像が表示され続け、クリック等が効かなくなります。その場合、リロードして、元画像のURLが間違ってないことを確認してください。

Comments [0] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site

Highslide JSの動作やスタイルを簡単に設定できる「Highslide Editor」の徹底解説

１．概要

２．各種設定（Generalタブ）

３．各種設定（Galleryタブ）

４．各種設定（HTMLタブ）

５．各種設定（Styleタブ）

６．各種設定（Behaviourタブ）

７．各種設定（Overlaysタブ）

８．その他

Highslide JSのキャプションのスタイルを調整する

１．スタイルシートの修正

２．JavaScriptの修正

CommentCustomField プラグイン + HighSlide JS

１．HighSlide JS の設定

２．テンプレートの修正

Highslide JS のギャラリーモード

１．script 要素と link 要素の設定

２．オプションの設定

３．スライドショー表示用のXHTML設定

４．画像リンクの設定

５．注意事項