jquery - Fancybox 图像和视频在同一个图库中

Question

我正在为我的弹出式画廊使用精美的盒子，但我遇到了问题。我想将图像和视频放在同一个画廊中。我有一个缩略图，显示了我的作品集中的不同作品，我们是一家设计和视频公司，因此我必须能够在同一个弹出画廊中完成这两项工作。以前有其他人遇到过这个问题吗？我想人们想要这样做是很常见的。

这是我的标记...我有相同的 rel 属性，因此它们位于同一个库中，但我正在调用不同的脚本，以便可以正确设置类型。

$("a#brianguehring").fancybox();

$("a#brianguehring-video").fancybox({ 
    'type'          : 'swf',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
});

<span>
<a class="grouped_elements icon_camera" rel="group-brian" id="brianguehring" title="Brian Guehring Website" href="images/portfolio/brianguehring-one.png"></a>
</span>

<span>
<a class="grouped_elements" rel="group-brian" id="brianguehring-video" title="Pasquale Vitello'Showreel 2010" href="http://vimeo.com/24081323">&nbsp;</a>
</span>

Answer 1

到这里我已经成功了。我假设您希望图像和视频位于同一组中。我将工作示例放在 JS Fiddle - http://jsfiddle.net/4pAQz/1/ 上

你的 JS 调用看起来像这样。而且这一切都必须通过一次调用完成。

$(document).ready(function(e) {
$("a[rel=example_group]").fancybox({
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'titlePosition'     : 'over',
    'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-over">Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
    }
});
});

您的 HTML 将如下所示: 注意:请注意，Vimeo 播放器的 href 是player.vimeo.com/video/YourIDHere。无需 SWF 代码。它就是有效的。您还需要两个 anchor rel=""具有相同的名称，以便将对象放入同一组中。

<div>
 <a rel="example_group" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">
 <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg" />
 </a>
 <a rel="example_group" title="Title of video here" class="various iframe" href="http://player.vimeo.com/video/24081323?title=0&amp;byline=0&amp;portrait=0">
 <img alt="" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" />
 </a></div>