よろしければ、この1つのメッセージで複数の質問をします。それぞれの答えを個別に検索しましたが、現時点では少し頭がおかしいと思いますので、基本的な質問をお詫びします。私はデザイナーであり、ひどいコーダーですが、必要なものがすべて揃ったテーマを見つけることができません。
1つのリンクから複数のアイテム（スタイル付きのテキスト、画像、ビデオ）を含むポートフォリオページを作成しようとしています。ギャラリーごとに複数のリンクもあります。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>
さて、これはがらくただと確信していますが、それを修正する方法を推測することはできず、現在画像に対して機能しています。
これが私が理解できないことです：
•これが正しくないと確信しているため、ギャラリーを適切に構成する方法。ギャラリーは、個別のインスタンスではなく、異なるデータセットを呼び出すだけのクラスである必要があるように感じます。
•ビデオサービスでホストされていないが、Webサーバーに保存されているビデオファイルを含める方法。
•各ギャラリーの簡単な要約を書くことができる、スタイル設定されたテキストのページを作成する方法。
•このような大きなファイルではうまくアニメーション化されない上からの反転ではなく、トランジションをフェードさせる方法。
•次と前のボタンが再び循環するのを止める方法。私は、戻るボタンがない最初のスライドであり、進むボタンがない最後のスライドでした。今のところ、それはただ循環し続けており、それは私の目的にとって混乱するだろうと思います。
これは、トランジションとサイクリングの問題以外の画像で機能するように見える、私が今持っているもののリンクです。また、リンクとしての画像でも機能するようになりましたが、実際にはそれについての助けは必要ありません。
助けてくれる人に感謝します。私はこのことを学び続けようとしていますが、おそらく私の脳はそれを理解するように配線されていないという結論に達しました。