4

ファンシーボックスが既に含まれているWordpressのテーマを使用しています。すべてが正常に、スムーズに、そしてクリーンに機能します。今、やりたいことがありますが、残念ながら私にはそのための知識がありません。

公開された投稿の最初のサムネイルをクリックすると、ファンシーボックスのスライドショーが表示され、すべてのサムネイルが表示されます。十分にクールですが、このスライドショーには、これらのサムネイルだけでなく、それ以上のものを表示したいと思います. ローカルでホストされている、おそらく 10 または 20 個のファイルのようなものです。

これを行う方法があると思います。別の質問でこのコードフラグメントを見つけました（ファンシーボックス-単一のサムネイルからスライドショーを表示する方法）が、どれだけ頑張っても機能しませんでした（もっとまたはできる「読む」コードは減りましたが、それを書くことはまだ私にできることではありません!)

ええ、簡単に言えば、「post1」のファンシーボックスに、サムネイル以外の X 画像を表示したいと思います。また、このトリックを X の異なる投稿で繰り返すことができるようにするため、構造的なトリックだけでなく、クリーンな方法を見つける必要があります。上記のコードを投稿の html 部分に含めようとしましたが、うまくいきませんでした。

お気軽にお答えください！さらに情報が必要な場合はお知らせください。

これが私の HTML 投稿の興味深い部分だと思います。 



<div id="product-slider">
        <div id="product-slides">
                            <div class="item-slide">
    <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 />     <span class="overlay"></span>
   </a>
</div> <!-- .item-slide -->
                            <div class="item-slide">
    <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox">
        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 />        <span class="overlay"></span>
   </a>
</div> <!-- .item-slide -->
                    </div> <!-- #product-slides -->

                    <div id="product-thumbs">
                                    <a href="#" class="active" rel="1">
                        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 />                     <span class="overlay"></span>
                    </a>
                                    <a href="#" class="last" rel="2">
                        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 />                        <span class="overlay"></span>
                    </a>
                            </div> <!-- #product-thumbs -->
            </div> <!-- #product-slider -->
4

1 に答える 1

0

いくつかの質問、外部リンクなどを読んだ後、これが私の問題をどのように理解し、それがどのように機能すると信じているかです:(非常に基本的に聞こえる場合は申し訳ありませんが、私が読みたかった方法で説明します初心者向け言語: オン)

fancybox は私の WP テーマによって既にアクティブ化されているため、投稿の HTML コードで呼び出す必要はありません。投稿のソース コードを確認すると (サムネイルが 1 つあり、コードは追加されていません)、次のコードが生成されていることがわかります。

<div id="product-slider">
        <div id="product-slides">
                            <div class="item-slide">
    <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
        <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 />     <span class="overlay"></span>
   </a>
</div> <!-- .item-slide -->
                    </div> <!-- #product-slides -->

したがって、スライドショーの「rel」値は「gallery」です。ここで、次のコードを使用して、スライドショーで表示するために投稿に必要な数のファイルを追加するだけです。

<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>

それだけです。サムネイルとして表示される画像はありませんが、好きなだけ画像を追加できます。とにかく、ToniとJanisの助けに感謝します.

于 2012-10-20T13:24:19.010 に答える