tabulousよりもシンプルなEasyTabs とか、その他

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

EasyTabs.js http://os.alfajango.com/easytabs/
使い方もわかりやすいので、オススメです。

このタブ切り替えの中に、画像の切り替えと開閉コンテンツを入れないといけなくて…画像切り替えはhttps://github.com/tszming/jquery-swapimageを使用。*ダウンロードするとサンプルが入ってます。*切り替える画像の大きさが違う場合はCSSでautoを指定。

jQueryを読み込んで
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.swapimage.min.js"></script>
<script type="text/javascript">
	$.swapImage(".swapImageDisjoint");
</script>　↑これはマウスオーバーで切り替え
画像切り替え部分は↓　切り替えたい画像にid="main-image"、サムネイルのクラスにswapImageDisjoint { sin: ['#main-image:切り替える画像URL'], sout: ['#main-image:元の画像URL'] }
<?php if (get_field('main-image')) {
$attachment_id = get_field('main-image');$size = 'product-middle';$image = wp_get_attachment_image_src( $attachment_id, $size ); ?>
<img id="main-image" src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php the_field('name'); ?>" /><?php } ?>
↑Advanced Custom Fields 画像フィールド、↓繰り返しフィールド
<ul id="xxxx">
<?php if(get_field('other-images')): ?>
<?php while(the_repeater_field('other-images')): ?>
<?php if( get_sub_field('image') ){ ?><?php $attachment_id = get_sub_field('image'); $sizet = 'product-thumb'; $sizef = 'product-middle'; $imaget = wp_get_attachment_image_src( $attachment_id, $size ); $imagef = wp_get_attachment_image_src( $attachment_id, $sizef ); ?><li><img class="swapImageDisjoint { sin: ['#main-image:<?php echo $imagef[0]; ?>'], sout: ['#main-image:<?php echo $image[0]; ?>'] }"  src="<?php echo $imaget[0]; ?>" width="88" height="88" alt="<?php the_field('name'); ?>" /></li><?php } ?>
<?php endwhile; endif; ?>
</ul>

開閉コンテンツは開閉のトリガーが見出しではなく、開閉するコンテンツから離れた場所にあるので、以下のようにトリガーになるIDと開閉するIDを指定。jQuery要です。

<script>
$(document).ready(function(){
$("#trigger").click(function(){
  $("div#open").toggle();
  });
});
</script>