Переход от изображения к видео на fancybox

У меня есть галерея fancybox с изображениями и видео. Когда я нажимаю на изображение и использую колесо прокрутки мыши, я могу просматривать различные изображения, но всегда пропускаю видео. Если я нажму на видео, оно воспроизводится хорошо и все...

Я хотел бы иметь возможность перейти к своему видео при просмотре изображений галереи...

это веб-сайт, на котором я делаю это www.charbelnicolas.com (пожалуйста, нажмите на вторую страницу, чтобы увидеть галерея, о которой я говорю)

Теперь... изображение и видео имеют один и тот же rel, который равен "gallery2", и это код, который я использую для галерей:

    <script type="text/javascript">

        $(document).ready(function() {
        $(".fancybox").fancybox({ helpers: { title: false } });});

    </script>


    <script type="text/javascript">

    $(document).ready(function() {
    $('.fancybox-media').fancybox({ 'minWidth': 720, 'minHeight': 480, helpers : { media : {}}});});

    </script>

Что мне сделать, чтобы я мог видеть стрелки навигации на своем видео и чтобы при использовании клавиатуры или колеса прокрутки мыши во время просмотра галереи я мог видеть видео вместе с изображениями? (так что больше не пропускает видео)

Я искал обсуждения в группах Google и видел различные ответы от JFK, но я не могу заставить его работать ... может быть, если вы, ребята, проверите мой веб-сайт, вы сможете сказать мне, что не так.

Спасибо


jquery fancybox fancybox-2
person Charbel Nicolas    schedule 27.02.2013    source источник
comment
Кстати, это видео с зеленым изображением, на котором написано Te de limon.   -  person Charbel Nicolas    schedule 27.02.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужен только один сценарий для изображений и видео.

Если вы хотите передать такие параметры, как minWidth и minHeight для вашего видео, сделайте это, используя (HTML5) атрибуты data-* (например, data-min-width="720" и data-min-height="480") в вашей ссылке, например:

<a rel="gallery2" class="fancybox" href="http://vimeo.com/59469665" data-min-width="720" data-min-height="480"><img class="left" src="http://charbelnicolas.com/thumbs/anunciotedelimonthumb.png" alt="" /></a>

Затем извлеките эти значения в обратном вызове beforeShow, например:

$(".fancybox").fancybox({
    beforeShow: function () {
        this.minWidth  = $(this.element).data("min-width");
        this.minHeight = $(this.element).data("min-height");
    },
    helpers: {
        media: {}
    }
});

См. JSFIDDLE.

P.S. Не забудьте загрузить файл jquery.fancybox-media.js.

person JFK    schedule 27.02.2013
comment
Большое спасибо, JFK, теперь все работает отлично. Я ценю это. - person Charbel Nicolas; 27.02.2013