これが私が持っているセットアップです:
http://i.stack.imgur.com/varMV.png
画像 B をクリックすると、画像 A と画像 B が切り替わります。画像 E をクリックすると、画像 B と画像 E が切り替わります。
ただし、ホバー効果を追加して、画像にカーソルを合わせるとその画像が暗くなるようにしたいと考えています。既に機能していますが、(たとえば) 画像 B をクリックすると、画像 B と画像 A が切り替わりますが、画像 B は既に暗く、ホバー効果は画像 A では機能しません。
私はWordpressを使用しています:
<div id="content" class="site-content" role="main">
<div class="content_wrapper">
<div class="content_featured" style="float:left; "></div>
<?php if ( have_posts() ) : ?>
<?php
$i = 1;
?>
<div class="content_children" style="float:right">
<div class="content_left" style="float:left">
<?php while( have_posts() ) : the_post(); ?>
<?php
static $count = 0;
if( $count == 5 ) { break; }
else {
if( $i == 1 ) {
?><span><span class="main active"><a href="javascript:void(0);"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full');?></div></a></span></span><?php
} else {
?><span class="child nonactive"><a href="javascript:void(0);"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full'); ?></div></a></span><?php
}
$i++;
$count++;
}
?>
<?php endwhile; ?>
</div>
<div class="content_right" style="float:right;"></div>
</div>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div>
</div><!-- #content -->
これまでのスクリプトは次のとおりです。
jQuery(document).ready(function() {
divide_content($);
cycle_images($);
darken_images($);
var main = jQuery(".content_left span:first").html();
jQuery(".content_left span:first").empty();
jQuery(".content_featured").append(main);
});
function cycle_images($) {
$(".nonactive").click(function() {
var a = $(this).html();
var b = $(".active").html();
//alert(a+"\n\n"+b);
$(this).empty();
$(".active").empty();
$(this).append(b);
$(".active").append(a);
});
}
function divide_content($) {
var size = $(".content_left > span").size();
$(".content_left > span").each(function(index) {
if(index >= size / 2) {
$(this).appendTo(".content_right");
}
});
}
function darken_images($) {
$(".nonactive img").hover(function() {
$(this).fadeTo(500, 0.5);
}, function() {
$(this).fadeTo(500, 1);
});
$(".content_featured").hover(function() {
$(".active img").fadeTo(500, 0.5);
//alert("qwe");
}, function() {
$(".active img").fadeTo(500, 1);
});
}
PS これが間違ったタイトルであることはわかっていますが、他にどのように述べればよいかわかりません。
編集:フィドルでできる最善のことは次のとおりです。リンク