Fancybox 2 上的多个问题：一个链接中的多张图片，同一图库中的视频和图片，如何防止循环答案

【问题标题】：Multiple Questions on Fancybox 2: Multi-image from One link, Video and Images in same gallery, How to prevent cycleFancybox 2 上的多个问题：一个链接中的多张图片，同一图库中的视频和图片，如何防止循环
【发布时间】：2012-05-04 02:04:19
【问题描述】：

如果可以的话，我将在这一条消息中提出多个问题。我已经独立搜索了每个答案，但在这一点上，我认为这一切都让我有点过头了，所以对基本问题表示歉意。我是一名设计师，也是一名糟糕的程序员，但我找不到一个能满足我所有需求的主题。

我正在尝试创建一个投资组合页面，该页面将包含来自一个链接的多个项目（样式文本、图像、视频）。不同的画廊也会有多个链接。我查看了 Fancybox 网站上的示例页面，我得到了 something 来处理图像，但我觉得它可能非常笨拙和错误。

我想要的结构如下：

公司 1 徽标作为画廊链接 -> （用于描述作品的文本、图片 1、图片 2、图片 3、mp4 文件）

公司 2 徽标作为画廊链接 -> （用于描述作品的文本，图片 1，图片 2，图片 3，mp4 文件）等等

到目前为止，基于花哨的盒子示例，我所做的是为每个画廊创建一个 id，然后为每个客户放置一段代码。这是我现在拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <meta name="author" content="Jeffrey Nee" >
    <meta name="description" content="Jeffrey Nee Portfolio Site" >
    <meta name="keywords" content="Jeffrey Nee, Jeff Nee, Art Director, Creative Director, Los Angeles, San Francisco, Advertising, Microsoft, Carl's Jr." >
    <title>Jeffrey Nee | Art Director / Creative Director</title>
    <link href="styles.css" rel="stylesheet" media="screen" type="text/css" >

    <script type="text/javascript" src="Libraries/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Libraries/jquery.mousewheel-3.0.6.pack.js"></script>
    <script type="text/javascript" src="Libraries/fancybox/jquery.fancybox.js?v=2.0.6"></script>
    <link rel="stylesheet" type="text/css" href="Libraries/fancybox/jquery.fancybox.css?v=2.0.6" media="screen">
    <script type="text/javascript" src="Libraries/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script>

</head>

<body id="body" >
<div id="content" >
<div id="header" ><a href="index.html" target="" name="" ><img src="images/neebook_straight.png" alt="" ></a><div id="nav" ><a href="index.html" target="" name="" >home </a>&nbsp; &nbsp; &nbsp; &nbsp;portfolio &nbsp; &nbsp; &nbsp; &nbsp;<a href="about.html" target="" name="" >about </a>&nbsp; &nbsp; &nbsp; &nbsp;<a href="contact.html" target="" name="" >contact</a> &nbsp; &nbsp; &nbsp; &nbsp;<a href="miscellania.html" target="" name="" >miscellania</a></div></div>

<div id="portfolio_grid" ><div>

<a id="fancybox_BooksForDummies" href="javascript:;">Books For Dummies</a>
<a id="fancybox_BootCamp" href="javascript:;">Boot Camp</a>
<a id="fancybox_CHM" href="javascript:;">Computer History Museum</a>
<a id="fancybox_Encarta" href="javascript:;">Microsoft Encarta</a>
<a id="fancybox_Marketplace" href="javascript:;">Marketplace</a>
<a id="fancybox_OfficeMac" href="javascript:;">Office for Mac</a>
<a id="fancybox_OfficeXP" href="javascript:;">Office XP</a>
<a id="fancybox_Piaggio" href="javascript:;">Piaggio MP3</a>
<a id="fancybox_Rosemount" href="javascript:;">Rosemount</a>

<script type="text/javascript">
        $(document).ready(function() {
            /*
            *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
            */

            $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',

                    arrows : true,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });

            /*
             *  Galleries
             */

            $("#fancybox_BootCamp").click(function() {
                $.fancybox.open([
                    {
                        href : 'images/Print/Boot_Camp_01.jpg',
                    }, {
                        href : 'images/Print/Boot_Camp_02.jpg',
                    }, {
                        href : 'images/Print/Boot_Camp_03.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_BooksForDummies").click(function() {
                $.fancybox.open([
                    {
                        href : 'images/Print/Books_for_Dummies.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_CHM").click(function() {
                $.fancybox.open([
                    {
                        href : 'images/Print/Computer_History_Museum.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_Encarta").click(function() {
                $.fancybox.open([
                                {
                        href : 'images/Print/Encarta_Office_01.jpg',
                    }, {
                        href : 'images/Print/Encarta_Office_02.jpg',
                    }, {
                        href : 'images/Print/Encarta_Office_03.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_Marketplace").click(function() {
                $.fancybox.open([
                                {
                        href : 'images/Print/Marketplace_01.jpg',
                    }, {
                        href : 'images/Print/Marketplace_02.jpg',
                    }, {
                        href : 'images/Print/Marketplace_03.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_OfficeMac").click(function() {
                $.fancybox.open([
                                {
                        href : 'images/Print/Office_Mac_01.jpg',
                    }, {
                        href : 'images/Print/Office_Mac_02.jpg',
                    }, {
                        href : 'images/Print/Office_Mac_03.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_OfficeXP").click(function() {
                $.fancybox.open([
                                {
                        href : 'images/Print/Office_XP_01.jpg',
                    }, {
                        href : 'images/Print/Office_XP_02.jpg',
                    }, {
                        href : 'images/Print/Office_XP_03.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_Piaggio").click(function() {
                $.fancybox.open([
                                {
                        href : 'images/Print/Piaggio_01.jpg',
                    }, {
                        href : 'images/Print/Piaggio_02.jpg',
                    }, {
                        href : 'images/Print/Piaggio_03.jpg'
                    }
                ], {

                });
            });

            $("#fancybox_Rosemount").click(function() {
                $.fancybox.open([
                                {
                        href : 'images/Print/Rosemount_01.jpg',
                    }, {
                        href : 'images/Print/Rosemount_02.jpg',
                    }, {
                        href : 'images/Print/Rosemount_03.jpg',
                    }, {
                        href : 'images/Print/Rosemount_04.jpg'
                    }
                    ], {
                });
            });

});
</script>

</div>

</div>

</div>

</body></html>

现在，我确定这是废话，但我不知道如何修复它，它现在可以用于图像。

这是我想不通的：

• 如何正确构建画廊，因为我很确定这是不对的。我觉得画廊应该是一个只调用不同数据集而不是单独实例的类。

• 如何包含未托管在视频服务上但仅存储在我的网络服务器上的视频文件。

• 如何创建一个仅包含样式文本的页面，以便我可以编写每个画廊的小摘要。

• 如何让过渡淡出，而不是从顶部翻转，这样大文件的动画效果不佳。

• 如何阻止下一个和上一个按钮再次循环。我是第一张没有后退按钮的幻灯片，也是最后一张没有前进按钮的幻灯片。现在它只是不断循环，我认为这对我的目的来说会令人困惑。

这是我现在所拥有的链接，它似乎确实适用于过渡和循环问题以外的图像。我也让它与图像作为链接一起使用，但我真的不需要帮助。

Portfolio Page

感谢任何可以提供帮助的人。我一直在努力学习这些东西，并刚刚得出的结论是，我的大脑可能无法理解它。

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

好吧，您似乎需要多个答案（尽管您只能接受一个）。我会从头顶尝试其中的一些，所以，

问：如何包含未托管在视频服务上但仅存储在我的网络服务器上的视频文件？

A：无论如何你都需要一名球员。例如，您可以使用 jwplayer。直接链接您的（flv、mp4、mpg）视频

<a class="myVideo" href="pathToVideo/video.flv">open my video in fancybox</a>

然后为此类视频使用脚本

 $("a.myVideo").click(function() {
   $.fancybox({
    'content': '<embed src="pathToPlayer/jwplayer.swf?file='+this.href+'&amp;autostart=true&amp;fs=1" type="application/x-shockwave-flash" width="352" height="240" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>'               
   }); // fancybox
   return false;
  }); // click

Q：如何阻止下一个和上一个按钮再次循环。我希望第一张幻灯片没有后退按钮，最后一张没有前进按钮。

A：将选项loop 设置为false 喜欢

$(".fancybox").fancybox({
 loop: false
});

问：如何让过渡淡出，而不是从顶部翻转，这样大文件的动画效果不佳？

A：使用这些选项

  openEffect: 'fade',
  prevEffect: 'fade',
  nextEffect: 'fade'

【讨论】：

感谢 JFK 的回复。我在它周围闲逛了足够长的时间以使其正常运行。主要是在我表弟的帮助下，他是一个至少可以阅读语法的编码器。为了记录，我决定将视频上传到 Vimeo 并将它们嵌入到 iframe 中，以确保播放器可以在任何地方播放。无论如何，我拥有的视频都是标清视频，因此与编码的质量差异非常小。感谢您的宝贵时间。