2

妻の照明デザイン事業のポートフォリオサイトをやっています。jQuery サイクル プラグインは、私が必要とする機能を提供しているように見えますが、Mike Alsup のサイトで例を確認した後でも、困惑しています。本当に、私はこれを自分でやってのけるための JavaScript のバックグラウンドを持っていません。

ナビゲーションにサムネイルを使用して、ページャー機能で制御されるスライドショーを作成したいと考えています。メイン スライドとサムネイルは (レイアウトを維持するために) まったく異なる縦横比であるため、cycle を使用してサムネイルを生成することはできません。スライドには、画像とキャプションが含まれています。できるだけ多くの既存のマークアップを保持したいと考えています。

スライドショーの内容は次のとおりです。

<div id="slideshow" />
        <div class="first">
            <img src="../_/img/projects/shootingstar-1.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-2.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-3.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-4.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-5.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>

サムネイル/ナビゲーション コンテンツは次のとおりです。画像に一貫した命名規則を使用しようとしました：

<div id="slidenav">
        <li><a href="#"><img src="../_/img/projects/shootingstar-1t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-2t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-3t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-4t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-5t.jpg" alt="" /></a></li>
    </div>

そして最後に、何らかの形で役立つ場合に備えて、私のスタイリング:

#slidenav {display: block; float: right; width: 200px;}
#slidenav li {list-style: none; float: left;}
#slidenav li img {padding: 2px; border: 1px solid #999; margin: 0 0 8px 8px;}
#projectcopy {display: block; float: right; width: 220px;}
#projectcopy p {font-size: 12px; color: #666; line-height: 16px; margin: 0 10px 20px 16px; text-align: right;}
#projectcopy ul {list-style: none; margin: 0 10px 20px 16px;}
 #projectcopy ul li {font-size: 11px; color: #666; line-height: 14px;  text-align: right; margin-bottom: 10px;}

ここに投稿された例があります：

http://prithardlighting.com/nova/portfolio/sample-project.html

現在、スライドに単純なサイクルが設定されているだけであることがわかります。ネタバレ無視してください。明らかに、これはまだ開発中です。

助けていただければ幸いです。これは、他の人がやろうとしたことでなければなりません。これまでに見た例を理解するのに苦労しています。彼らは皆、私が持っていないJSの基本的な理解を（当然のことながら）想定しています。

4

2 に答える 2

3

このデモを参照して、質問に答えてください。

于 2011-05-01T16:32:35.180 に答える
1
  1. 循環するコンテンツをラップしたすべての div を削除します (div#slideshow の子要素。スクリプトが 1 つの div 内のすべてを循環するため、サイクルが機能しなくなります)。
  2. 同じ理由で p.credit を削除します。そうしないと、スクリプトが循環し、一致するサムネイルがない場合に問題が発生します (3. を参照)。
  3. サムネイルの数 {*t.jpg} が {div#slideshow} の画像の数と正確に一致していることを確認してください。それが機能するポイントです。不一致は、機能しないスクリプトにつながります。
  4. デモの jquery マークアップをそのまま使用し、{pager: '#nav',} を {pager: '#slidenav',} に置き換えます。

それでも動作しない場合は、スクリプトが読み込まれるかどうかを firebug で確認してください。はいの場合は、リンクされたサムネイルに進む前に、まずサイクル {div#slideshow} を実行してみてください。

于 2011-05-02T07:25:18.167 に答える