備忘録です。

タイル状に並べた画像が切り替わる「Animated Responsive Image Grid」を紹介します。

参考サイト
タイル上に並べて、画像を切り替える画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」

Animated Responsive Image Gridからファイル一式をダウンロードします。

デモページ

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<script>
<!--以下外部ファイルでもOK-->
<script type="text/javascript">	
$(function() {
    $( '#ri-grid' ).gridrotator( {
    //ここにオプションを記述
    } );
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css" />

jsなど任意のディレクトリにjquery.gridrotator.jsとmodernizr.custom.26633.jsをアップロード
cssなど任意のディレクトリにstyle.cssをアップロード
※style.cssに記述されているコードをご自身のcssにコピペしてもOKです。
なお、jquery.min.jsは2.1.0でも動作確認できました。

注意点としては、boxsliderやタブ切り替えのjQueryと相性が悪いのか、実装したところ最初は表示すらされない状態でしたが、上記の「外部ファイルでもOK」の箇所を外部ファイルの一番上に記述したところ問題なく動作しました。

HTML

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
        <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
        <!-- ... -->
    </ul>
</div>

htmlに上記のソースコードをコピペして画像だけ書き換えればOKです。
なお、画像は必ず<a href="#">～</a>に記述してください。

オプションで表示枚数などの指定ができます。

// number of rows
rows			: 4,

// number of columns 
columns			: 10,

// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024			: {
	rows	: 3,
	columns	: 8
},

w768			: {
	rows	: 3,
	columns	: 7
},

w480			: {
	rows	: 3,
	columns	: 5
},

w320			: {
	rows	: 2,
	columns	: 4
},

w240			: {
	rows	: 2,
	columns	: 3
},

// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step			: 'random',
maxStep			: 3,

// prevent user to click the items
preventClick	: true,

// animation type
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType		: 'random',

// animation speed
animSpeed		: 500,

// animation easings
animEasingOut	: 'linear',
animEasingIn	: 'linear',

// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval		: 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow		: true,
// if true the items will switch when hovered
onhover		: false,
// ids of elements that shouldn't change
nochange		: []

表示枚数については、jquery.gridrotator.jsの下記でも変更可能です。
デフォルト設定なので本来なら編集しないほうがいいかもしれませんが・・・

// number of rows
rows : 4,
// number of columns 
columns : 10,
w1024 : { rows : 3, columns : 8 },
w768 : {rows : 3,columns : 7 },
w480 : {rows : 3,columns : 5 },
w320 : {rows : 2,columns : 4 },
w240 : {rows : 2,columns : 3 },

最後に、表示枚数以上の画像を用意しないと切り替わりませんのでご注意ください。
恥ずかしながら、最初は画像が切り替わらず、これでハマってしまいました。