如果可以，我会在这一条消息中提出多个问题。我已经独立地搜索了每个人的答案，但在这一点上，我认为这只是我的头脑，所以对基本问题道歉。我是一名设计师和一名可怕的程序员，但我找不到一个拥有我想要的东西的主题。
我正在尝试创建一个投资组合页面，该页面将包含来自一个链接的多个项目（样式文本，图像，视频）。不同的画廊也会有多个链接。我查看了Fancybox网站上的示例页面，我得到了某些东西来处理图片，但我觉得这可能是非常糟糕和错误的。
我想要的结构如下：
公司1徽标作为图库的链接 - ＆gt; （文字来描述作品，图像1，图像2，图像3，mp4文件）
公司2徽标作为图库的链接 - ＆gt; （文字来描述作品，图片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> portfolio <a href="about.html" target="" name="" >about </a> <a href="contact.html" target="" name="" >contact</a> <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>
现在，我确定这是垃圾，但我不知道如何修复它，它现在正在用于图像。
这是我无法弄清楚的：
•如何正确构建画廊，因为我很确定这是不对的。我觉得画廊应该是某种类，只是调用不同的数据集而不是单独的实例。
•如何包含未托管在视频服务上但仅存储在我的网络服务器上的视频文件。
•如何创建一个只有样式文本的页面，我可以写出每个图库的小摘要。
•如何使转换渐变，而不是从这些大型文件没有动画效果的顶部翻转。
•如何停止下一个和上一个按钮再次循环。我是第一张没有后退按钮的幻灯片，最后一张没有前进按钮。现在它只是一直在循环，我认为这会让我感到困惑。
这里有一个我现在所拥有的链接，它似乎与转换和循环问题以外的图像一起使用。我也得到了将图像用作链接，但我并不需要帮助。
感谢任何可以提供帮助的人。我一直在努力学习这些东西，并得出结论，也许我的大脑没有理解它。
答案 0 :(得分：0)
好吧，好像你需要多个答案（尽管你只能接受一个答案）。我会从头顶尝试其中的一些，所以，
问：如何包含未托管在视频服务上但仅存储在我的网络服务器上的视频文件？
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+'&autostart=true&fs=1" type="application/x-shockwave-flash" width="352" height="240" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>'
}); // fancybox
return false;
}); // click
问：如何停止下一个和上一个按钮再次循环播放。我希望第一张幻灯片没有后退按钮，最后一张没有前进按钮。
A ：将选项loop设置为false，如
$(".fancybox").fancybox({
loop: false
});
问：如何使转换渐变而不是从这些大型文件没有动画效果的顶级内容中翻转过来？
A ：使用这些选项
openEffect: 'fade',
prevEffect: 'fade',
nextEffect: 'fade'