3

我有两个插件：Tiles Gallery和Colorbox - 一个非常基本的画廊设置，单击缩略图 -> 在 Colorbox 中加载全尺寸。但是，我希望能够单击图库图像并在 Colorbox 弹出窗口中的 iframe 中加载网页。

以下是常规画廊项目/图像的加载方式（完美运行）：

<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 ”类。根据 Tiles 库文档，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 回答