Question

我一直在尝试为图像，视频和PDF等多种文件类型使用相同的fancybox功能。到目前为止它的工作，但问题是，当我打开图像并点击下一个按钮时，它显示我相同的图像，而不是前进到视频，然后在PDF旁边。可能是我错过了什么，任何帮助都会欣赏。作为参考，我添加了一个小提琴。

＆＃13;

 $(document).ready(function () {
        var fb_type = "";
        var fb_src = "";

        $(".fancybox").click(function () {
            var varContent = "";
            var fb_type = $(this).attr("data-type");
            var fb_src = $(this).attr("data-src");
            console.log(fb_type);
            console.log(fb_src);
            if (fb_type == "image") {
                var varContent = '<img src="' + fb_src + '">';
            } else if (fb_type == "video") {
                var varContent = '<video width="100%" controls autoplay><source src="' + fb_src + '" type="video/mp4">Your browser does not support HTML5 video.</video>';
            } else if (fb_type == "pdf") {
                var varContent = '<embed src="' + fb_src + '#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />';
            }

                $(".fancybox").fancybox({
                    //API options here
                    margin: [20, 60, 20, 60],
                    beforeLoad : function () {
                        console.log(varContent);
                    },
                    type: 'html',
                    content: varContent
                });         
            
        });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>



<a data-type="image" data-src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="fancybox" rel="gallery" href="javascript:;">Image</a>

<a data-type="video" data-src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" class="fancybox" rel="gallery" href="javascript:;">Video</a>

<a data-type="pdf" data-src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" class="fancybox" rel="gallery" href="javascript:;">PDF</a>

＆＃13;

Fanybox Next Prev无法正确处理HTML类型

0 个答案: