JQuery圖像交換

我有6個圖像（3個全尺寸和3個縮略圖），並將每個圖像url加載到一個javascript變量中。在我的頁面上，我有3個圖像顯示：一個全尺寸和兩個縮略圖。當用戶點擊縮略圖時，我希望全尺寸圖像顯示全尺寸版本的點擊縮略圖，縮略圖顯示以前全尺寸圖像的縮略圖版本。JQuery圖像交換

我可以用下面的腳本得到這個問題。我還可以建立一個巨大的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 
    } 
}

來源

2011-12-13 chris_mac

我給你兩個解決方案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); 
       }); 
    });

來源

2011-12-13 23:32:40

是的，這個作品！雖然對於使用此功能的其他人，請不要忘記在data-main =「 – 2011-12-14 16:49:25

對待每一個縮略圖相同，增加了縮略圖類對他們
添加到所謂的thumb_image和main_image每個縮略圖屬性（不知道這是否是一個正確的使用HTML，但它的工作原理）
單擊thubmnail時，將thumb_image和main_image與#main_image（使用$（this）的魔術）交換。
將圖像full_size在主圖像上，並以縮略圖

來源

2011-12-13 23:21:35 JavierIEH

JQuery圖像交換

回答

相關問題