「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエフェクトが用意されています。

サンプルはこちら

→ タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」サンプル


まずはjq-tilesからjQueryプラグインなどを一式ダウンロードします。(Githubからデモ用のファイルもダウンロードできますので参考になります。)

<head>部分にcssを指定します。

<link rel=”stylesheet” href=”jquery.tiles.min.css”/>
<style>
.slider { width: 940px; height: 400px; } // 使用する画像の大きさ
</style>

そして、</body>の直前にJavaScriptを設定して準備完了です。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script src=”jquery.tiles.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.slider’).tilesSlider({ random: true })
</script>

続いて<body>部分のスライドショーを置きたい部分にコードを記述します。

<div class=”slider”>
<img src=”ここに画像へのパス”>// ここに文字を入れるとキャプションが入ります。
<img src=”img/img01.jpg”/>
<img src=”img/img02.jpg”/>// 以下表示させたい画像の分繰り返す
</div>

簡単な使用方法は以上ですが、エフェクトをさらに細かくオプションで設定することができます。

$(function(){
$(‘.slider’).tilesSlider({
x              : 4, //  x軸のタイルの数 20個まで
y              : 4, //  y軸のタイルの数 20個まで
effect         : ‘default’, //  ※エフェクトの種類
fade           : false, // fade images in addition to the tiles effect
random         : false, // trueにすると決まった順にエフェクトされます。
reverse        : false, // start animation from opposite direction
backReverse    : false, // reverse the animation when going back in the slideshow (useful for some effects)
rewind         : false, // reverse animation at a certain percentage in time
auto           : false, // Start the slideshow on load
loop           : false, // Start slideshow again when it finishes
slideSpeed     : 3500, // スライドのスピード
tileSpeed      : 800, //  全てのタイルが消えるまでのスピード
cssSpeed       : 300, // css3 transitionのスピード [100,200,300,400,500,600,700,800,900,1000],
nav            : true, // Add navigation
navWrap        : null, // Add the navigation to an existing element
bullets        : true, // Show bullets, if false the show pagination with numbers
thumbs         : true, // Show thumbnails when hovering nav
thumbSize      : 25, // Thumbnail size (percentage of the original image)
timer          : true // タイムバーを表示するかどうか
});
});

※エフェクトの種類

  • default
  • simple
  • left
  • up
  • leftright
  • updown
  • switchlr
  • switchud
  • fliplr
  • flipud
  • reduce
  • 360

それぞれのエフェクトはこちらを見ると比べやすいですよ。
Demo: http://elclanrs.github.com/jq-tiles/

以下にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: