レスポンシブな画像ギャラリーをつくってくれる「Responsive Thumbnail Gallery」
当ページのリンクには広告が含まれています。
スポンサーリンク
レスポンシブな画像ギャラリーをつくってくれるjQueryプラグイン「Responsive Thumbnail Gallery」を紹介します。
jQueryプラグイン「Responsive Thumbnail Gallery」
Responsive Thumbnail Galleryは、レスポンシブな画像ギャラリーをつくってくれるjQueryプラグインです。
jsファイルと画像を用意すれば簡単にレスポンシブが画像のウェブデザインがつくれます。
スポンサーリンク
デモで、ブラウザの幅を縮めてみてください。
「Responsive Thumbnail Gallery」のデモ
デモのソース（HTML + jQuery）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Thumbnail Gallery | jQueryプラグインまとめのカルマ</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='js/jquery.min.js'>\x3C/script>")</script>
<script src="js/responsivethumbnailgallery.js"></script>
<script>
$(document).ready(function() {
var gallery = new $.ThumbnailGallery($('#gallery'), {
thumbImages: 'img/thumbs/thumb',
smallImages: 'img/small/image',
largeImages: 'img/large/image',
count: 10,
thumbImageType: 'jpg',
imageType: 'jpg',
breakpoint: 600,
shadowStrength: 1
});
});
</script>
</head>
<body>
<h1>Responsive Thumbnail Galleryのデモでーす。</h1>
<p>ブラウザの幅を縮めてください。</p>
<div id="gallery">
<p>Put your alt no-js content here.</p>
</div>
</body>
</html>
スポンサーリンク