Fancybox изображений и видео в той же галерее - PullRequest
Новая
       17

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

5 голосов
/ 29 марта 2012

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

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

1 Ответ

5 голосов
/ 29 марта 2012

Здесь у меня все работает. Я предполагаю, что вы хотите изображение и видео в одной группе. Я поместил рабочий пример здесь на 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 есть ссылка на 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>
...