twitter bootstrapのcarouselで多めの画像を扱う

February 9, 2012,
tags: javascript jquery twitter bootstrap


このエントリーをはてなブックマークに追加

twitter bootstrapは本当に便利だと思います。
いつの間にか2.0になってさらに良い感じになっています。

で、今日の出来事なんですが、パワポのファイルが重すぎていやだなーって出来事がありました。
「パワポがだめならブラウザで表示すればいいじゃない」
ってことでパワポから画像に書き出してそれをブラウザに表示させるようにしました。

でもやっぱ普通に作るのはイケてないよねってことでtwiter bootstrapのcarouselを使ってスライドしている間をだしてみましたw
サンプル通りにつくってしまうと50枚ぐらいのスライドだったりしたときに表示が遅くなってしまいますよね。
ということで作ってみました。必要な時に画像を取得してくるようにしました。
仕組みはとっても単純で最初にJSONで画像のファイル名一覧を取得してきて、それを状況に応じてimgタグで書き出してあげているだけです。

鯖側(普通にディレクトリからファイル一覧を取得しているだけです…)

<?php

// フィイルの取り出し
$readFiles = function( ){
	
	// データの取得
	$res_dir = opendir( './img/sample/carousel' );
	$files = array();
	
	while( $file_name = readdir( $res_dir ) ) {
		if ( $file_name != ".." && $file_name != "." ) {
			$files[] = $file_name;
		}
	}
	closedir( $res_dir );
	return $files;
};

header("Content-Type: text/javascript; charset=utf-8"); 
echo json_encode( $readFiles());

クライアント側


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>スライドサンプル3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript">
$(function(){
	var basePath = "/img/sample/carousel"; // 画像のベースパスを指定
	var images = []; // 画像ファイル名格納用配列
	var slideNumber = 0;
	
	$.get('/data.php',function(json){
		$.each(json,function(i,v){
			images.push( basePath + v );
		});
		
		if ( images.length < 2 ) {
			return;
		} 
		
		// 最初の画像の設定
		var position = {
			prev : images.length - 1,
			now  : 0,
			next : 1
		};
		
		var html = "";
		$.each(position,function(i,v){
			if ( i == 'now' ) {
				html += "<img class='item active' src='"+ images[v]+"'>";
			}
			else {
				html += "<img class='item' src='"+ images[v]+"'>";
			}
		});
		
		if ( html == "" ) {
			return;
		}
		
		// 画像のDOMの追加
		$('#myCarousel > .carousel-inner').html(html);
		
	},'json');
	
	var next = function(){
		// 次のスライドへ移動
		slideNumber++;
        nextSlideNumber = slideNumber + 1;

        if ( slideNumber >= images.length - 1 ) {
			slideNumber = 0;
		}
		
        if ( nextSlideNumber >= images.length - 1 ) {
			nextSlideNumber = 0;
		} 
		
		
		$('#myCarousel > .carousel-inner > img:first').empty();
		$('#myCarousel > .carousel-inner').append('<img class="item" src="'+ images[nextSlideNumber]+'">');
        $('#myCarousel').carousel('next');
		
		
        if ( slideNumber > images.legnth - 1) {
            slideNumber = 0;
        }
		
	}
	
    var prev = function(){
    	// 前のスライドに移動
    	slideNumber--;
    	prevSlideNumber = slideNumber - 1;
    	if ( slideNumber < 0 ) {
    		slideNumber = images.length - 1;
    	}
    	if ( prevSlideNumber < 0 ) {
    		prevSlideNumber = images.length - 1;
    	}
        $('#myCarousel > .carousel-inner > img:last').empty();
        $('#myCarousel > .carousel-inner').prepend('<img class="item" src="'+ images[prevSlideNumber]+'">');
        $('#myCarousel').carousel('prev');
    	
    }
	
    var slide = function(type) {
    	// スライドの実行
    	if ( type == 'next' || type == 39 ) {
    		next();
    	}
    	else if ( type == 'prev' || type == 37 ) {
    		prev();
    	}
    	$('#slideNumber').html('現在のスライド番号:' + slideNumber );
    }
    
    $('.carousel-control').click(function(event){
    	// 横ボタン動作
        if ( images.length < 2 ) {
            return;
        } 
    	slide( $(this).attr('data-action') );
    });
    
    $("body").keydown(function(event){
        // キーボード操作によるスライドの移動
        slide(event.keyCode);
    });
    
	
});
</script>

</head>
<body>
	<div id="myCarousel" class="carousel">
	   <div class="carousel-inner"></div>
    	<a class="carousel-control left" href="#myCarousel" data-action="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-action="next">&rsaquo;</a>
	</div>
	<div id="slideNumber"></div>
</body>
</html>

これで急遽プレゼンをブラウザ使ってやらなければいけないときでも安心ですね^^

comments powered by Disqus