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图像交换

回答

相关问题