Question

我希望展示一个包含多种媒体的fancybox图库，我能够展示多种媒体但无法将其用作群组图库，任何人都可以告诉我实现这一目标的更好选择。

我正在使用fancybox 2.1.5和jQuery v1.12.0

＆＃13;

$(document).ready(function () {
    $("body").on('click', '.fancybox', function () {
        var varContent = "";
        var fb_type = $(this).attr("data-type").trim();
        var fb_src = $(this).attr("data-src");
        if (fb_type == "png" || fb_type == ".png" || fb_type == "jpg" || fb_type == ".jpg") {
            var varContent = '<img style="max-width:100%" src="' + fb_src + '">';
        } else if (fb_type == "mp4" || fb_type == ".mp4" || fb_type == ".m4a" || fb_type == "m4a") {
            var varContent = '<video width="100%" autoplay controls><source src="' + fb_src + '" type="video/mp4">Your browser does not support HTML5 video.</video>';
        }
        $(".fancybox").fancybox({
            type: 'html',
            content: varContent,
            afterLoad: function () {
                $(varContent).on('load', function () {
                    $.fancybox.update();
                });
            },
        });

    });

}); // ready

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a data-fancybox-type="iframe" data-fancybox-group="gallery" rel="gallery1" class="btn btn-info btn-3d edit fancybox" data-type="jpg" data-src="https://images.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">Image</a>
<a data-fancybox-type="iframe" rel="gallery1" data-fancybox-group="gallery" class="btn btn-info btn-3d edit fancybox" data-type="mp4" data-src="https://ia902302.us.archive.org/27/items/Pbtestfilemp4videotestmp4/video_test.mp4">Video</a>

＆＃13;

用于多种格式的fancybox与下一个

0 个答案: