1

画像をクリックすると、3 つのボタンが付いたファンシー ボックスが表示され、いずれかのボタンをクリックすると、ファンシー ボックスを使用してギャラリーが表示される方法を見つけようとしています。それは可能ですか？ファンシーボックスが欲しい 1:iFrame --> ファンシーボックス 2: One Image gallery

私はそれがどこかで読みましたが、他の人はそうではないと言いました.

4

1 に答える 1

0

fancybox v2.x を使用している場合、fancybox をボタンとイメージ ギャラリーを使用してボックスにバインドするのと同じくらい簡単なので、ボタン付きの fancybox を起動するには、次のような html を作成します。

<a class="fancybox" href="#buttonsContainer"><img src="images/01t.jpg" alt="" /></a>

.....でコンテンツをターゲットにしていることに注意してください。次に、非表示のhtmlコンテンツは次のようになりますinlineid="buttonsContainer"

<div style="display: none;">
 <div id="buttonsContainer">
  <a class="fancybox myButton" href="images/01.jpg" data-fancybox-group="gallery01" title="gallery 01">open gallery 01</a>
  <a class="fancybox myButton" href="images/02.jpg" data-fancybox-group="gallery02" title="gallery 02">open gallery 02</a>
  <a class="fancybox myButton" href="images/03.jpg" data-fancybox-group="gallery03" title="gallery 03">open gallery 03</a>
 </div>
 <div>
  <a class="fancybox" href="images/04.jpg" data-fancybox-group="gallery01" title="gallery 01"></a>
  <a class="fancybox" href="images/05.jpg" data-fancybox-group="gallery02" title="gallery 02"></a>
  <a class="fancybox" href="images/06.jpg" data-fancybox-group="gallery03" title="gallery 03"></a>
  <a class="fancybox" href="images/07.jpg" data-fancybox-group="gallery01" title="gallery 01"></a>
  <a class="fancybox" href="images/08.jpg" data-fancybox-group="gallery03" title="gallery 03"></a>
 </div>
</div>

ボタン ( buttonsContainer) 用とギャラ​​リー用のセクションを設定したことに注意してください。

カスタム fancybox スクリプトは、次のように単純にすることができます。

$(document).ready(function(){
 $(".fancybox").fancybox();
}); // ready

...ボタンのあるボックスと画像ギャラリーの両方で機能します。

ワーキングデモを見る

于 2012-10-22T08:07:03.837 に答える