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フィドルに実際の例を載せました - 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は次のようになります。NOTICE：Vimeoのプレーヤーのためのhrefがplayer.vimeo.com/video/YourIDHereであることに気づきます。 SWFコードは不要です。それだけで動作します。オブジェクトが同じグループに入るようにアンカー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>