JQuery Image Swap

Question

私は6つの画像（3つのフルサイズと3つのサムネイル）を持っており、それぞれの画像URLをjavascript変数に読み込んでいます。私のページには、1つのフルサイズと2つのサムネイルが表示されます。ユーザーがサムネイルをクリックすると、フルサイズの画像にはクリックされたサムネイルのフルサイズのバージョンが表示され、サムネイルには以前のフルサイズの画像のサムネイルバージョンが表示されます。

これは以下のスクリプトで1回発生することがあります。また、すべてのケースをチェックするために巨大な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する画像を設定します。

1）私はもっと好きなすべての3つの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

2. それらにサムネイルクラスを追加し、それぞれが同じサムネイル扱いthumb_imageとmain_imageと呼ばれる各サムネイル属性に追加する（これはHTMLの正しい使用の場合は知らないが、それは動作します）
3. サムネイルをクリックすると、thumb_imageとmain_imageを#main_imageのものと入れ替えます（$（this）の魔法を使います）。
4. 私はあなたに2つのソリューションを与えるメイン画像にfull_sizeすると、サムネイル