0

私はウェブプログラミングにかなり慣れていないので、現在サイトに取り組んでいます。このサイトの一部に、3 枚の写真のコレクションがあります。その下に 1 つの大きいサムネイルと 2 つの小さいサムネイル。目標は、サムネイルの 1 つをクリックしてスポットを 1 つの大きな画像と交換できる方法を作成することです。どうすればこれを行うことができますか？コードのスニペットを示します。ありがとう！

<div class = 'picture-container'>
            <div class = 'large-picture' id = 'lp1'>
                <figure style = 'float:left;width:45%;'>
                    <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
                    <figcaption class = 'red-cap'>Our Set-Up</figcaption>
                </figure>
                <div class = 'picture-content'>
                    <div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                    <div class = 'picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
                    <!--<div class = 'small-picture'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
                    </div>
                    <div class = 'small-picture'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
                    </div>-->
                </div>
                <div class = 'thumbnail-container'>
                    <figure class = 'thumbnail'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </figure>
                    <figure class = 'thumbnail'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </figure>
                </div>
            </div>
        </div>
4

1 に答える 1

0

この問題を解決するには多くの方法があります。最も簡単な方法は、すべての画像 (大小を問わず) をダンプし、一度に 1 枚だけを表示することです。

したがって、ソース コードでは、最初の画像を除くすべての大きな画像に のクラスがありhidden、それらが になりますdisplay: none。あとは、サムネイルをクリックしたときに右の大きな画像を表示するだけです。

適切な大きな画像を表示するには、識別子によってサムネイルを大きな画像に関連付ける必要があります。以下は、サムネイル リンクの href を大きな画像 ID に設定する例です。

<a href="#lp1">
  <figure class="thumbnail">...</figure>
</a>

ここで、javascript (jQuery) を追加します。

// preselect all large images
var largeImages = $('figure.large');
// add handler for thumbnail clicks
$('.thumbnail-container').on('click', 'a', function (e) {
    e.preventDefault();
    var thumbnailLink = $(this),
        selectedLarge = $(thumbnailLink.attr('href'));
    // hide all the large images
    largeImages.addClass('hidden');
    // show the large image that corresponds to the clicked thumbnail
    selectedLarge .removeClass('hidden');
});

したがって、簡単な方法は非表示/表示ですが、これは最も効率的ではありません。非表示であっても、クライアントにすべての画像をロードさせます。

より効率的な方法はdata-、サムネイルに属性を追加し、サムネイル クリック ハンドラ内で、クリックされたサムネイルのデータで大きなコンテンツ領域を更新することです。画像を「置換」するには、src属性を置換するだけで済みます。

于 2013-07-10T20:27:44.607 に答える