次へ

極意（10）ポップアップ画像を極める

画像をポップアップ表示するには、以下の4つの方法があります。
あまり違いはありませんので、お好きなポップアップを選んでください。

  1. Colorbox 機能でポップアップ画像を表示する
  2. Lightbox2 機能でポップアップ画像を表示する
  3. Greybox 機能でポップアップ画像を表示する
  4. haikでお薦めする段組併用のフォトアルバム表示



（１）colorbox 機能でポップアップ

下記のサムネイル画像をクリックしてみて下さい。

colorbox 機能 colorbox 機能 colorbox 機能 colorbox 機能

[check]上記のおまじないです。

&show(PublicPhote01.jpg,colorbox=grp1,25%,colorbox 機能);
&show(PublicPhote03.jpg,colorbox=grp1,25%,colorbox 機能);
&show(PublicPhote06.jpg,colorbox=grp1,25%,colorbox 機能);
&show(PublicPhote08.jpg,colorbox=grp1,25%,colorbox 機能);

[check]ポップアップ画像のイメージ
colorbox

[check]画面遷移の操作について
ポップアップ画面上の左下の矢印ボタンを押下するか
またはキーボードの矢印キー（←／→）ボタン押下でも可
画面遷移で最後の画像から先頭画像へ自動的に遷移する



（２）lightbox2 機能でポップアップ

下記のサムネイル画像をクリックしてみて下さい。

lightbox2 機能 lightbox2 機能 lightbox2 機能 lightbox2 機能

[check]上記のおまじないです。

&show(PublicPhote08.jpg,lightbox2=grp2,25%,lightbox2 機能);
&show(PublicPhote06.jpg,lightbox2=grp2,25%,lightbox2 機能);
&show(PublicPhote03.jpg,lightbox2=grp2,25%,lightbox2 機能);
&show(PublicPhote01.jpg,lightbox2=grp2,25%,lightbox2 機能);

[check]ポップアップ画像のイメージ
lightbox2

[check]画面遷移の操作について
ポップアップ画面上の左辺か右辺に表示される矢印ボタンを押下するか
またはキーボードの矢印キー（←／→）ボタン押下でも可
但し、画面遷移で最後の画像から先頭画像への画面遷移はしない



（３）greybox 機能でポップアップ

下記のサムネイル画像をクリックしてみて下さい。

greybox 機能 greybox 機能 greybox 機能 greybox 機能

[check]上記のおまじないです。

&show(PublicPhote09.jpg,greybox=grp3,25%,greybox 機能);
&show(PublicPhote01.jpg,greybox=grp3,25%,greybox 機能);
&show(PublicPhote06.jpg,greybox=grp3,25%,greybox 機能);
&show(PublicPhote08.jpg,greybox=grp3,25%,greybox 機能);

[check]ポップアップ画像のイメージ
greybox

[check]画面遷移の操作について
ポップアップ画面の外の上辺の黒いバーに表示される矢印ボタンを押下
キーボードの矢印キー（←／→）ボタンによる画面遷移は機能しない
画面遷移で最後の画像から先頭画像への画面遷移はしない


余談ですが・・・

余談ですが、肝心なことを忘れていました。
サムネイル画像を横に並べるテクニックが重要なテーマというか、それが今回のミソです。そのテクニックが記述されたページを紹介します。

新しいポップアップ「Colorbox」です



（４）haikでお薦めする段組併用のフォトギャラリー

前記までのポップアップ画像表示は、旧QHMの環境で動いていた仕様です。
勿論、その方法でhaik環境で正常に表示されていますので何ら問題はないのですが、環境がhaikになったのを契機に段組を併用した表示方法をレクチャー致します。

画像の説明

画像の説明

画像の説明

画像の説明


画像の説明

画像の説明

画像の説明

画像の説明


画像の説明

画像の説明

画像の説明

画像の説明



[check]上記のおまじないです。

#cols{{
&show(PublicPhote01.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote03.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote04.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote05.jpg,colorbox=cboxg1,,画像の説明);
}}
&br;
#cols{{
&show(PublicPhote06.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote07.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote08.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote09.jpg,colorbox=cboxg1,,画像の説明);
}}
&br;
#cols{{
&show(PublicPhote10.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote11.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote12.jpg,colorbox=cboxg1,,画像の説明);
====
&show(PublicPhote14.jpg,colorbox=cboxg1,,画像の説明);
}}
[check]haik環境での段組との併用のメリット
前記の余談に記載した「サムネイル画像を横に並べるテクニック」云々は、旧のQHM環境だけの話で、haik環境では無関係の話で無視して下さい。要するにhaik環境でのフォトギャラリーは、より優しくなったと言うことです。



戻る

上記の関連記事はお役に立ちましたか？

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 9  
    役に立たなかった 0  


ご意見箱


  • HAIK-CLUBに加入しましたが、こうようなことはマニュアルに載っていないので、大変助かりました。
    ありがとうございました。 -- いこいからださぽーと 2017-03-04 (土) 11:44:21