3

Tiles GalleryとColorboxの2 つのプラグインがあります。これは非常に基本的なギャラリー設定で、サムネイルをクリックします -> Colorbox にフル サイズを読み込みます。ただし、ギャラリーの画像をクリックして、カラーボックス ポップアップの iframe に Web ページを読み込めるようにしたいと考えています。

通常のギャラリー アイテム/画像が読み込まれる方法は次のとおりです (完全に機能します)。

<article class="tile category">
   <a href="path/to/image.jpg">
     <img class="item" src="path/to/thumbnail.jpg" />
     <div class="caption"></div>
   </a>
</article>

そして、iframeのロードに失敗した方法は次のとおりです。

<article class="tile iframe" data-type="html">
  <a class="tile iframe" href="http://google.com">
  <img class="item" src="path/to/thumbnail.jpg" />
  </a>
</article>

jQuery は次のとおりです。

<script>
    //instantiate Final Tiles Gallery
    $("#gallery-name").finalTilesGallery({
        minTileWidth: 120,
        margin: 1,
    });
    // colorbox image size setup
    $(".tile a").colorbox({rel:'group1', maxWidth:'95%', maxHeight:'95%'
    }); 
    // colorbox iframe setup
    $(".tile iframe").colorbox({iframe:true, innerWidth:600, innerHeight:700});

</script>

Tiles ギャラリー プラグインを機能させるには、それぞれに "tile something " クラスが必要です。タイル ギャラリーのドキュメントによると、YouTube 動画は次の方法で iframe を使用して読み込まれます。

<article id="video" class="tile ftg-set-2" data-type="video">
 <iframe class="item" width="540" height="300" src="http://www.youtube.com/embed/M4yCwlDxPtY" frameborder="0" allowfullscreen></iframe>
</article>

ただし、iframe をギャラリー自体に表示したくないので、サムネイル画像を表示して、それを Colorbox に表示するだけにしたいと考えています。

さらに情報が必要な場合はお知らせください。どんな助けでも大歓迎です！

4

1 に答える 1

1

私はこのように問題を解決することができました：

      <article class="tile category">
            <a class="className" href="http://iframe-address.com">
                <img class="item" src="path/to/thumbnail.jpg" />
                <div class="caption"></div>
             </a>
    </article>

jquery:

    $(".className").colorbox({iframe:true, innerWidth:'99%', innerHeight:'99%'});
于 2013-06-12T22:08:24.423 に答える