Изображения и видео 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>

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

Ответы (1)


arrow_upward
5
arrow_downward

Вот у меня заработало. Я предполагаю, что вы хотите, чтобы изображение и видео находились в одной группе. Я поместил рабочий пример здесь на 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>
person ClosDesign    schedule 29.03.2012
comment
После добавления «type»: «swf» я все еще получаю только пустое видео, которое всплывает и фактически не воспроизводится. Есть ли причина для этого? 2012.delineamultimedia.com –› Я работаю с двумя верхними изображениями. - person user1301091; 29.03.2012
comment
Ссылка JS Fiddle, которую вы прислали, у меня не работает, я пытался очистить кеш, но это не помогло. - person user1301091; 30.03.2012
comment
хм, ссылка JS Fiddle сама по себе не работает? или пример не работает. Я только что попробовал, и это сработало. Похоже, ваш пример работает на вашем демонстрационном сайте. Существует проблема с верхней точкой, поскольку стрелка слева закрывает кнопку воспроизведения для кнопки воспроизведения Vimeo. Вы можете захотеть обогнать часть CSS для наводимой области стрелки FancyBox. - person ClosDesign; 30.03.2012
comment
Я вижу, что скрипка JS на самом деле портится. Скопируйте и вставьте полный HTML-код на пустую HTML-страницу и запустите его локально на своем компьютере. Это должно сработать. Но все равно стрелки барахлят, блокируя кнопку плей и поле встраивания. Просто парящая область. Это можно исправить с помощью обгона CSS. Кроме того, попробуйте вместо этого использовать URL-адрес player.vimeo.com, подобный этому player.vimeo .com/видео/. Если вы сделаете это таким образом, вам не понадобится опция type:. - person ClosDesign; 30.03.2012