1. HOME > 
  2. ブログ・お知らせ > 
  3. jQuery > 
  4. CrossSlideで投稿記事のアイキャッチ画像を利用したスライドショーを表示

ライラックミモザのブログ・お知らせ

2013年3月24日

CrossSlideで投稿記事のアイキャッチ画像を利用したスライドショーを表示

ライラックミモザのサイトトップページで、フラワースケッチの作品を少し動きをつけて表示させたいと思い、シンプルなスライドショー形式を取り入れました。
WordPressプラグインを利用して実装することもできますが、トップページではメインビジュアル部分でスライドショー系のプラグインをすでに利用しており、この他に利用することは避けたかったため、見よう見まねで、コードを書いてみました。
参考にさせていただいた書籍や記事は、下記にまとめて紹介します。

今回やりたかったこと

・シンプルに、複数の画像をクロスフェードで切り換えて表示
・複数の作品をきれいに見せ、アイキャッチ効果を高めることが目的のため、ナビゲーション等の機能は必須ではない
・スライドショーの画像は、新規にアップロードするのではなく、各作品のページで、もともとアイキャッチ画像として登録している画像をページリンク付で表示

CrossSlideを利用したシンプルなスライドショー

jQuery「CrossSlide」

スライドショーの処理には、jQueryの「CrossSlide」を利用しました。
上記のサイトから、「jquery.cross-slide.min.js」をダウンロードし、読み込ませたら、まず、スライドショーを表示させるエリア(例:<div id=”flowersketchGallery”></div>)を用意します。

<div id="flowersketchGallery"></div>

header.php

スライドショーの効果の設定と、指定した投稿タイプから、任意10件のアイキャッチ画像をスライドショーとして表示するために、下記のコードを記述します。

<script type="text/javascript">
jQuery(document).ready(function($){
$('#flowersketchGallery').crossSlide({
sleep:5, // 画像が切り替わるまでの秒数(=表示秒数)
fade:1 // フェードの秒数
},[
<?php
global $post;
$tmp_post = $post;
$args = array(
'post_type' => 'flowersketch', /* 投稿タイプ */
'numberposts' => 10, /* 表示件数 */
'orderby' => 'rand', /* 表示順序 */
);
$rand_posts = get_posts($args);
foreach($rand_posts as $post):
$sketch_id = get_post_thumbnail_id($post-&gt;ID);
$sketch = wp_get_attachment_image_src($sketch_id,array(150,150)); 
$src = $sketch[0]; /* アイキャッチ画像src */
?>
<?php if($post === end($rand_posts)): ?> /* 配列の一番最後を取得 */
{src:'<?php echo $src; ?>', /* スライドショーの画像src */
href:'<?php echo get_post_permalink(); ?>'} /* 画像のリンク指定 */
<?php else: ?>
{src:'<?php echo $src; ?>',href:'<?php echo get_post_permalink(); ?>'},
<?php endif; ?>
<?php endforeach; ?>;
<?php $post = $tmp_post; ?>;
]);
});
</script>

完成したスライドショーが、ちょうどこの記事の右横にある「FLOWER SKETCH」です。

CrossSlideは、「FLOWER SKETCH」のような通常のクロスフェードのほか、上下や指定位置からのクロスフェードも可能です。

参考書籍・記事

下記は、参考にさせていただいた書籍および記事です。

・ソシム「WordPressデザインブック」(書籍)
テンプレートタグ/get posts – WordPress Codex 日本語版
・560days「アイキャッチ画像を表示する
・SHIZUKU ALPHA「画像切り替え

☆2013/09/16更新
・FOOTMARK「PHPのforeachで最初と最後を取得する方法

ありがとうございました。

ブログ・お知らせトップへ