如果可以的话，我将在这一条消息中提出多个问题。我已经独立搜索了每个答案，但在这一点上，我认为这一切都让我有点过头了，所以对基本问题表示歉意。我是一名设计师，也是一名糟糕的程序员，但我找不到一个包含我想要的一切的主题。
我正在尝试创建一个投资组合页面，该页面将包含来自一个链接的多个项目（样式文本、图像、视频）。不同的画廊也会有多个链接。我查看了 Fancybox 网站上的示例页面，我得到了一些可以处理图像的东西，但我觉得它可能非常笨拙和错误。
我想要的结构如下：
公司 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> 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>
现在，我确定这是废话，但我不知道如何修复它，它现在可以用于图像。
这是我无法弄清楚的：
• 如何正确构建画廊，因为我很确定这是不对的。我觉得画廊应该是一个只调用不同数据集而不是单独实例的类。
• 如何包含未托管在视频服务上但仅存储在我的网络服务器上的视频文件。
• 如何创建一个仅包含样式文本的页面，我可以编写每个画廊的小摘要。
• 如何让过渡淡出，而不是从顶部翻转，这样大文件的动画效果不佳。
• 如何阻止下一个和上一个按钮再次循环。我是第一张没有后退按钮的幻灯片，也是最后一张没有前进按钮的幻灯片。现在它只是不断循环，我认为这对我的目的来说会令人困惑。
这是我现在拥有的链接，它似乎确实适用于过渡和循环问题以外的图像。我也让它与图像作为链接一起使用，但我真的不需要帮助。
感谢任何能提供帮助的人。我一直在努力学习这些东西，并刚刚得出结论，也许我的大脑并没有连接到理解它。