我有 6 张图片(3 张全尺寸图片和 3 张缩略图),并将每个图片 url 加载到一个 javascript 变量中。在我的页面上,我显示了 3 张图片:一张全尺寸图片和两张缩略图。当用户单击缩略图时,我希望全尺寸图像显示所点击缩略图的完整尺寸版本,以及缩略图显示前一个全尺寸图像的缩略图版本。
我可以使用下面的脚本让它发生一次。我还可以构建一个巨大的 if/then block 来检查所有情况,但我正在寻找更优雅的东西。有什么想法吗?
谢谢!
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
}
}
最佳答案
我给你两个解决方案。
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>
J查询:
$(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>
J查询:
$(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 图像交换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8496596/