WordPressに導入したbxsliderで動的に読み込んだ画像を使う

WordPress に javascript で動作する「スライダー」 を付けるメモの続きです。

bxslider がかなり使えるなーという事で、ちょっとカスタマイズしてみる事にしました。

関連記事

WordPressにbxsliderを使ってスライダーを付けてみる

bxslider で画像を「スライダー」の対象にするには、最初に HTML が出力されている必要があるのですが、対象とする画像を「動的」に指定できないかと思い少し試してみました。

PHP で img 要素を動的に吐き出せば一番簡単ですが、HTML を動的に生成するのが難しい場合にも対応できるように jsonp を使ってやってみました。

スポンサーリンク

bxslider のスライド画像を jsonp から読み込む

まず、サーバ部分ですが Perl で json を吐き出す処理をこんな感じに書いてみます。テストなので画像を直接指定しちゃってますけど、ここで表示させる画像を動的に生成させます。

#!/usr/bin/perl

use strict;
use warnings;
use CGI;
use JSON;

    my $q        = CGI->new;
    my $callback = $q->param('callback') || exit);

    my $hash = {};
    my @img  = (
           'http://example.jp/bxslider-01.jpg',
           'http://example.jp/bxslider-02.jpg',
           'http://example.jp/bxslider-03.jpg',
           'http://example.jp/bxslider-04.jpg',
           'http://example.jp/bxslider-05.jpg',
           'http://example.jp/bxslider-06.jpg'

       );

    foreach (@img) { push(@{$hash->{img}}, $_); }

    my $json = to_json( $hash, {utf8 => 1} );
    print $q->header(-type => 'text/x-json', -charset=>'utf-8'),"$callback($json)";

exit;

jQuery 側はこんな感じに。

(function ($) {
	$(function(){

		$.ajax({
			url      : "http://example.jp/image.cgi?",
			dataType : "jsonp",
			async    : "true"
		}).done(function(mycb){
			for (var i = 0; i < mycb.img.length; i++) {
				$(".bxslider").append('<div><img src="' + mycb.img[i] + '" /></div>');
			}
			// 成功した場合は bxslider を呼び出す
			loadSlider();
		}).fail(function(myerr){
			//debug
			//console.log(myerr);
		});
	});

	function loadSlider() {
		$(".bxslider").bxSlider({
			mode: 'horizontal',
			speed: 1500,
			pause: 3000,
			autoControls: true,
			auto: true,
			infiniteLoop: true,
			controls: false,
			slideWidth: 150,
			minSlides: 2,
			maxSlides: 4,
			moveSlides: 1,
			slideMargin: 5
		});
		return;
	};
})(jQuery);

最後は WordPress でこの javascript を読み込んで、表示させたい場所に以下の HTML タグを書きます。

<div class="bxslider"></div>

完成後はこんな感じになります。

bxslider Demo

中々いい感じにできました。

bxslider で外部から読み込みんだ画像を使う方法は以上になります。