Question

我有6张图片（3张全尺寸和3张缩略图）并将每张图片网址加载到javascript变量中。在我的页面上，我有3个图像显示：一个完整尺寸和两个缩略图。当用户点击缩略图时，我希望全尺寸图像显示所点击缩略图的完整尺寸版本，缩略图显示上一个完整尺寸图像的缩略图版本。

我可以使用下面的脚本进行一次此操作。我还可以构建一个巨大的if / then块来检查所有情况，但我正在寻找更优雅的东西。有什么想法吗？

谢谢！

    function add_image_header(){
    global $post;

    $image_header = get_post_meta( $post->ID, 'image_header', true );
    $image_one_full = get_post_meta( $post->ID, 'image_one_full', true );
    $image_one_cropped = get_post_meta( $post->ID, 'image_one_cropped', true );
    $image_two_full = get_post_meta( $post->ID, 'image_two_full', true );
    $image_two_cropped = get_post_meta( $post->ID, 'image_two_cropped', true );
    $image_three_full = get_post_meta( $post->ID, 'image_three_full', true );
    $image_three_cropped = get_post_meta( $post->ID, 'image_three_cropped', true );

    $page_meta_desc = get_post_meta( $post->ID, 'thesis_description', true );

    if($image_header){
        ?>

            <script type="text/javascript">
                $(document).ready(function(){
                    $("#thumb_one").click(function(){
                        var imageOneFull = "<?php echo $image_one_full;?>";
                        var imageOneCropped = "<?php echo $image_one_cropped;?>";
                        var imageTwoFull = "<?php echo $image_two_full;?>";
                        var imageTwoCropped = "<?php echo $image_two_cropped;?>";
                        var imageThreeFull = "<?php echo $image_three_full;?>";
                        var imageThreeCropped = "<?php echo $image_three_cropped;?>";

                        $('#thumb_one').click($('#main_image').attr("src",imageTwoFull));
                        $('#thumb_one').click($('#thumb_one').attr("src",imageOneCropped));
                    });
                });
            </script>

            <div id="img_header_container">
                <img src="<?php echo $image_one_full;?>" id="main_image"/>
                <img src="<?php echo $image_two_cropped;?>" id="thumb_one"/>
                <img src="<?php echo $image_three_cropped;?>" id="thumb_two"/>
                <div id="heading_text"><h2><?php echo get_the_title($ID) ?></h2><?php echo $page_meta_desc;?></div>
            </div>
        <?php
    }
}

Answer 1

对每个缩略图进行相同处理，向其添加缩略图类
添加到名为thumb_image和main_image的每个缩略图属性（不知道这是否正确使用html，但它有效）
点击thubmnail后，将thumb_image和main_image与#main_image中的那些交换（使用$（this）的魔力）。
在主图像上将图像设置为full_size，在缩略图上设置为thumb_image

Answer 2

我给你两个解决方案。

1）使用所有3个三个缩略图（我更喜欢）

HTML：

<div id="img_header_container">
            <img src="<?php echo $image_one_full;?>" id="main_image"/>
            <img class="thumb" data-main="?php echo $image_one_full;?>" src="<?php echo $image_one_cropped;?>" />
            <img class="thumb" data-main="?php echo $image_two_full;?>" src="<?php echo $image_two_cropped;?>"/>
            <img class="thumb" data-main="?php echo $image_three_full;?>" src="<?php echo $image_three_cropped;?>"/>
 </div>

Jquery的：

  $(document).ready(function(){
                $(".thumb").click(function(){
                   $('#main_image').attr("src", $(this).data('main'));
                });
  });

2）使用2张缩略图（根据要求）

HTML：

<div id="img_header_container">
            <img data-thumb="<?php echo $image_one_cropped;?>" src="<?php echo $image_one_full;?>" id="main_image"/>
            <img class="thumb" data-main="?php echo $image_two_full;?>" src="<?php echo $image_two_cropped;?>"/>
            <img class="thumb" data-main="?php echo $image_three_full;?>" src="<?php echo $image_three_cropped;?>"/>
 </div>

Jquery的：

  $(document).ready(function(){
                $(".thumb").click(function(){
                   var Image1Main = $(this).data('main');
                   var Image1Thumb = $(this).attr('src');

                   var Image2Main = $('#main_image').attr('src');
                   var Image2Thumb = $('#main_image').data('thumb');

                   $('#main_image').attr("src", Image1Main);
                   $('#main_image').data("thumb", Image1Thumb);


                   $(this).attr("src", Image2Thumb);
                   $(this).data("main", Image2Main);
                });
  });

JQuery图像交换

2 个答案: