1

この Web ページにprettyPhoto jQuery プラグインを実装しようとしています。

http://mcmach.com/mcmachine/photogallery.html

単一画像オプションを使用したいのでrel="prettyPhoto"、画像リンクを設定しました。私は jQuery の初心者であり、JavaScript の初心者です。アドバイスをいただければ幸いです。

4

2 に答える 2

11

ここに私があなたのページで見つけたいくつかの大きな問題があります...

セクションには<head>、これがあります...

<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 プラグインの前にjQuery を「含める」必要があります。

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 インクルードを配置することに関する私の回答をお読みください。<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>
于 2011-08-15T17:20:00.173 に答える
0

これは、そのプラグインのドキュメントから直接得られます。

<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>
于 2011-08-15T16:58:44.627 に答える