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

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

サンプルはこちら

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

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

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

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

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

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

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

$(function(){
$(‘.slider’).tilesSlider({
x              : 4, // 　ｘ軸のタイルの数　２０個まで
y              : 4, // 　y軸のタイルの数　２０個まで
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/

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <title>jq-tiles</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link rel="stylesheet" href="jquery.tiles.min.css"/>
<style>
.slider { width: 900px; height: 480px; }
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
  </head>
  <body>
  <h1>タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」</h1>
       <div class="slider">
        <img src="img/img01.jpg"/><p><strong>初音ミク　</strong><a href="http://matome.naver.jp/odai/2134072393120416701" target="_blank">「初音ミクの可愛い壁紙とイラスト画像を全力で集めていく」より</a>　参考：NAVERまとめ</p>
        <img src="img/img02.jpg"/>
        <img src="img/img03.jpg"/>
        <img src="img/img04.jpg"/>
        <img src="img/img05.jpg"/>
        <img src="img/img06.jpg"/>
        <img src="img/img07.jpg"/>
        <img src="img/img08.jpg"/>
        <img src="img/img09.jpg"/>
        <img src="img/img10.jpg"/>
      </div>
    <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($('.slider').tilesSlider({ random: true })
   );
});

</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jq-tiles</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

.slider { width: 900px; height: 480px; }

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #FFFFFF;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

</style>

</head>

<body>

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

<img src="img/img01.jpg"/><p><strong>初音ミク　</strong><a href="http://matome.naver.jp/odai/2134072393120416701" target="_blank">「初音ミクの可愛い壁紙とイラスト画像を全力で集めていく」より</a>　参考：NAVERまとめ</p>

</div>

$(function(){

$('.slider').tilesSlider($('.slider').tilesSlider({ random: true })

);

});

</script>

</body>

</html>

あわせてお読みください

スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」

「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。 16種類ものエフェクト効果があり、それらをランダムに使用す…

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください…

左右の画像をみせるイメージスライダーを作れる「Slider Pro」jQueryプラグイン

Slider Pro 「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像を…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

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

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

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

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

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

あわせてお読みください

コメントを残す コメントをキャンセル

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

コメントを残すコメントをキャンセル