このWebページにprettyPhoto jQuery pluginを実装しようとしています。prettyPhoto jQueryプラグインの実装
http://mcmach.com/mcmachine/photogallery.html
私は、単一の画像オプションを使用すると、画像リンクのrel="prettyPhoto"を設定しています。私はJavaScriptの初心者でjQueryの初心者です。アドバイスをいただければ幸いです。
これは、そのプラグインのドキュメントから直接来る：ここ
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
私は<head>セクションではon your page ...
を発見したいくつかの大きな問題は、あなたがこれを持っている...
<script type="text/jscript" src="JS/jquery.prettyPhoto.js"></script>
<script type="text/jscript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/jscript" src="JS/jquery-1.4.4.min.js"></script>
<script type="text/jscript" src="JS/jquery-1.6.1.min.js"></script>
最初の問題： jQueryの前にprettyPhotoが含まれています。の前にjQuery を "include"する必要があります。
第2の問題：あなたには3つのバージョンのjQueryが含まれています。 jQueryの複数のバージョンまたはインスタンスを「インクルード」することはできません。何らかの理由で、バージョン1.3.2、1.4.4、および1.6.1を含めてロードしています。最新のものを使用してください。
第3の問題： prettyPhotoを呼び出すことはありません。プラグインを「インクルード」すると、JavaScriptを使用してプラグインを呼び出す必要があります。
それはすべて、このようになるはずです
...<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[rel^="prettyPhoto"]').prettyPhoto({
// any configuration options as per the online documentation.
});
});
</script>
追記：あなたのJavaScriptを置くことについての最も効率的なページ読み込みのために、してくださいread my answer in this threadはちょうど</body>上記<body>セクションの末尾に含まれてタグ。
CSS： prettyPhotoのCSSファイルへのリンクもありません。これはページの<head>セクションにあるはずです。
<link rel="stylesheet" type="text/css" href="/path/to/prettyPhoto.css" media="screen" />
あなたのHTML：
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
すてきな説明。 – Code
セットアップと設定は非常に簡単ですので、どのような問題は、あなたが遭遇した、あなたはどんなアドバイスが必要なのですか？ – Sparky
このページではいくつかの提案を既に実装しているようです。これ以上質問はありますか？ – Sparky