Не показывалось всплывающее окно Fancybox

0

Это html, который я хочу использовать для галереи, чтобы показывать видео внутри фрейма при всплывании:

<ul id="gallery-v">
    <li> <a class='video' href='video from youtube'><img src='img/2.png' alt=''></a></li>
    <li> <a class='video' href='video from youtube'><img src='img/1.png' alt=''></a></li>
</ul>

Я хочу адаптировать для html для создания той же галереи, что и для изображений:

$(window).load(function () {
    // Gallery
    if (jQuery("#gallery-v").length) {
        // Fancybox
        jQuery("#gallery-v li a").fancybox({
            "titleShow": false,
                "transitionIn": "elasti",
                "transitionOut": "elastic",
                "closeBtn": true
        });

        var totalImages = jQuery("#gallery-v > li").length,
            imageWidth = jQuery("#gallery-v > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-video").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery-v").width(totalWidth);

        jQuery("#gallery-prev-v").click(function () {
            if (jQuery("#gallery-v").position().left < 0 && !jQuery("#gallery-v").is(":animated")) {
                jQuery("#gallery-v").animate({
                    left: "+=" + imageWidth + "px"
                });
            }
            return false;
        });

        jQuery("#gallery-next-v").click(function () {
            if (jQuery("#gallery-v").position().left > stopPosition && !jQuery("#gallery-v").is(":animated")) {
                jQuery("#gallery-v").animate({
                    left: "-=" + imageWidth + "px"
                });
            }

        });
        $("a.video").click(function () {
            $.fancybox({

                iframe: {
                    preload: false
                }
                maxWidth: 800,
                maxHeight: 600,
                fitToView: false,
                width: "70%",
                height: "70%",
                autoSize: false,
                closeClick: false,
                openEffect: "elastic",
                closeEffect: "none"

            });
        });
        return false;
    }
});
  • 0
    какой URL-адрес YouTube вы используете ?????
Теги:

2 ответа

0
Лучший ответ

попробуй что-нибудь вроде этого

 <a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
  • 0
    Это было полезно, но теперь у меня проблема с тем, что элементы управления YouTube не работают ...
0

Используйте тег видео в теге li, вот ссылка для вашей помощи:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Ещё вопросы

Сообщество Overcoder
Наверх
Меню