私は、Alex RabeのNextGEN Galleryを多くのクライアントサイトで集中管理された画像リポジトリとして使用しています。ページ。
このように、私はページ上に一連の4つのサムネイルを持つことができ、それぞれのサムネイルはクリックされたときにライトボックスの中で異なる写真のセットを開く。
どうすればよいかありがとう。
HTMLに各ギャラリーのすべての画像を出力します。各サムネイルの周囲のフルサイズ画像にリンクするアンカータグを使用します。使用するライトボックスプラグインに応じて、同じギャラリーのすべての画像をグループ化します(多くの場合、HTMLのrel
属性を使用して行われます)。その時点で、ギャラリーごとに1つのサムネイルを除いてすべてを隠すだけです。ライトボックスプラグインをギャラリーに接続します。
それをチェックアウト: http://jsfiddle.net/8WcUp/1/ -
画像はすでに gallery でグループ化されているので、単一の写真が属するギャラリー(これはI think は$image->galleryid
です)を特定し、rel="lightbox[$gallery]"
テンプレートのアンカータグにsinglepic.php
をドロップするだけです。ファイル。
だから、このようなもの(singlepic.php
NextGen Galleryテンプレートファイル内):
<?php
$galleryid = $image->galleryid;
?>
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> rel="lightbox[<?php echo $galleryid; ?>]" >
...
</a>
?>
それでもうまくいかない場合は、教えてください。
2015年およびNextGen 2.0以降。これをハックしないでください。単一の画像を表示するためにショートコードを使用してからライトボックスに移動してください。
[ngg_images gallery_ids=7 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=1 show_all_in_lightbox=1 show_slideshow_link=0]
さらに ドキュメンテーション および 便利な例 。
このスタイルをnggallery.cssファイルに追加するだけで、ギャラリーの最初の画像だけが表示されます。サムネイルをクリックすると、ライトボックスエフェクトにすべての画像が表示されます。 PHPコードは必要ありません。
/* For NextGen Gallery. Displays thumbnails on a page, and when you click each thumbnail opens it's own gallery. Normally when you insert a gallery, it displays all the thumbnails in the gallery. This hack will hide all the thumbnails except the first one. Make sure you don't display [show slideshow], because that will be the first child. */
div.ngg-gallery-thumbnail-box { display:none; }
div.ngg-galleryoverview div:first-child { display:block; }