極意(10)ポップアップ画像を極める

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

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



(1)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



(2)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



(3)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


余談ですが・・・

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



(4)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,,画像の説明);
}}



戻る

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

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


ご意見箱


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