思わず"いいね!"したくなる高機能画像ギャラリーJavaScript「Diapo」
jQueryプラグインのDiapoは多くのエフェクトやスマートフォン対応、円型メーター、ナビゲーション、ページネーション、サムネイル表示などの機能や各種設定を細かくできます。
困った時はまずこのプラグインを検討してみるのもいいかもしれません。
sponsors
使用方法
Diapoからファイル一式をダウンロード。
<link rel="stylesheet" href="diapo.css" type="text/css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript" src="jquery.easing1.3.js"></script>
<script type="text/javascript" src="diapo.js"></script>
<script type="text/javascript">
$(function() {
$('.pix_diapo').diapo({
fx:'mosaicRandom' //エフェクト
});
});
</script>
※diapo.css内で画像の幅を調整してください。
<div class="pix_diapo">
<div data-thumb="サムネイル画像パス1">
<amp-img src="画像パス1">
<div class="caption elemHover fromLeft">キャプション1</div>
</div>
<div data-thumb="サムネイル画像パス2">
<amp-img src="画像パス2">
<div class="caption elemHover fromLeft">キャプショ2ン</div>
</div>
</div>
※fromLeftで左から出てきます。
これで完成ですが、数々の設定はサンプルページの最下部あるいは元サイトに。
思わず"いいね!"したくなる高機能画像ギャラリーJavaScript「Diapo」サンプル
sponsors
記事作成:2011年8月30日 09:53
記事URL:http://www.skuare.net/2011/08/javascriptdiapo.html
TOP > javascript > 思わず"いいね!"したくなる高機能画像ギャラリーJavaScript「Diapo」
前の記事:セレクトメニューの選択肢を画像にする「Image Select plugin with jQuery」
次の記事:一味違ったCaptchaを導入できるJavaScript「MotionCAPTCHA」
あなたにはこちもお勧め!
jQuery プラグインまとめ!