twitter bootstrapは本当に便利だと思います。
いつの間にか2.0になってさらに良い感じになっています。
で、今日の出来事なんですが、パワポのファイルが重すぎていやだなーって出来事がありました。
「パワポがだめならブラウザで表示すればいいじゃない」
ってことでパワポから画像に書き出してそれをブラウザに表示させるようにしました。
でもやっぱ普通に作るのはイケてないよねってことでtwiter bootstrapのcarouselを使ってスライドしている間をだしてみましたw
サンプル通りにつくってしまうと50枚ぐらいのスライドだったりしたときに表示が遅くなってしまいますよね。
ということで作ってみました。必要な時に画像を取得してくるようにしました。
仕組みはとっても単純で最初にJSONで画像のファイル名一覧を取得してきて、それを状況に応じてimgタグで書き出してあげているだけです。
鯖側(普通にディレクトリからファイル一覧を取得しているだけです…)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?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());
|
クライアント側
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-action="next">›</a>
</div>
<div id="slideNumber"></div>
</body>
</html>
|
これで急遽プレゼンをブラウザ使ってやらなければいけないときでも安心ですね＾＾