JQuery Image Swap

Question

У меня есть 6 изображений (3 полноразмерных и 3 миниатюры) и загрузили каждый URL-адрес изображения в переменную 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

Я даю вам два решения.

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); 
       }); 
    }); 

Answer 2

1. Обрабатывать каждую миниатюру, то же самое, добавив класс миниатюры к ним
2. Добавить каждый атрибут уменьшенного называемых thumb_image и main_image (не знает, если это правильное использование HTML, но он работает)
3. При нажатии на thubmnail поменяйте файл thumb_image и main_image с помощью #main_image (используя магию $ (this)).
4. Установите изображение в full_size на основном изображении, и thumb_image на эскизе