Fancybox Изображения и видео в той же галерее

Я использую причудливый бокс для своей всплывающей галереи, но у меня проблема. Я хочу иметь изображения и видео в одной галерее. У меня есть эскиз, который показывает разную работу в моем портфолио, и мы являемся разработчиком дизайна и видео, поэтому важно, чтобы у меня была возможность делать как в одной всплывающей галерее. Кто-нибудь еще сталкивался с этой проблемой раньше? Я бы предположил, что людям очень нравится делать это.Fancybox Изображения и видео в той же галерее

Вот мой разметка ... У меня есть тот же атрибут 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>

источник

2012-03-29 user1301091

какая версия fancybox? Я думаю, что ваш подход верен, но вы можете упустить некоторые элементы в вашем скрипте, например, я не думаю, что вы должны установить '' type ':' swf'' для своих видео, кроме 'iframe''. Вам также может потребоваться изменить URL-адрес, указанный в коде 'embed', с сайта vimeo, например' http://player.vimeo.com/video/24081323?title=0 & byline = 0 & portrait = 0' и т. Д. Наконец, попробуйте использовать классы вместо ID, чтобы вы могли повторно использовать один и тот же код на нескольких элементах вашего кода. – JFK

Здесь у меня есть работа. Я предполагаю, что вы хотите изображение и видео в одной группе. Я положил рабочий пример здесь на 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 будет выглядеть следующим образом: ВНИМАНИЕ: обратите внимание, что HREF для игрока Vimeo является 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>

источник

2012-03-29 15:29:17 ClosDesign

После добавления 'type': 'swf', я все еще получаю пустое видео, которое всплывает и на самом деле не воспроизводится. Есть ли причина для этого? http://2012.delineamultimedia.com/ -> Я работаю с лучшими 2 изображениями. – user1301091

Ссылка JS Fiddle, которую вы отправили, не работает для меня, я попробовал очистить свой кеш, но этого не делал. – user1301091

hmm JS Fiddle Ссылка на него не работает? или пример не работает. Я просто попробовал, и это сработало. Похоже, что ваш пример работает на вашем демо-сайте. Существует проблема с над местом для стрелки слева покрывает кнопку воспроизведения для кнопки воспроизведения Vimeo. Возможно, вы захотите обогнать некоторые из CSS для области, нависшей на скорости стрелки FancyBox. – ClosDesign

Fancybox Изображения и видео в той же галерее

ответ

Смежные вопросы