javascript交换缩略图较大的图像

Question

Im pretty new to web programming and im working on a site now. In one part of this site, I have collections of 3 pictures. 1 larger one and two smaller thumbnails below it. The goal is to create a way in which i can click on one of the thumbnails and they swap spots with the one large picture. any idea how I would go about doing this? Heres a snippet of code. Thanks!

<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>

Answer 1

There are many ways to solve this problem. The easiest way is to dump all your images (large and small) and only show one at a time.

So in the source code all your large images except the first one will have a class of hidden , which makes them display: none . And then it's just a matter of showing the right large image when the thumbnail is clicked.

To show the right large image you need to associate the thumbnails with the large image by an identifier. Below is an example of setting the href of a thumbnail link to the large image id.

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

Now you add the 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');
});

So, the easies way is hide/show, but this means is not the most efficient. It makes the client load all the images even if they are hidden.

A more efficient approach is to add data- attributes in the thumbnails and inside the thumbnail click handler update the large content area with the data from the clicked thumbnail.To "replace" the image you just need to replace src attribute.