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;
    }
});
4

2 に答える 2

0

このようなことを試してください

 <a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
于 2013-10-07T11:22:41.567 に答える