skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」

画像ギャラリー系のプラグインは重い場合がありますが、今回のOrbit: jQuery Image Slider Plugin from ZURBは、わずか2.8kbで使用方法も簡単で、エフェクトもあり良いこと満載です。

sponsors

使用方法
Orbit: jQuery Image Slider Plugin from ZURBからファイル一式をダウンロードします。
<link rel="stylesheet" href="orbit.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.orbit.js"></script>
<script>
$(function(){
$('#id名').orbit({
animation: 'vertical-slide', //fade, horizontal-slide, vertical-slide
animationSpeed: 1000, //アニメーション速度
directionalNav: true, //方向ナビ表示
captions: true, //キャプション表示
captionAnimationSpeed: 800, //キャプションの表示速度
timer: true //タイマー表示
});
});
</script>

あとは上記id内に画像を記述していけば完成です。
<div id="id名">
<amp-img src="画像パス" title="キャプション" />
<amp-img src="画像パス" title="キャプション" />
<amp-img src="画像パス" title="キャプション" />
</div>

2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」サンプル

sponsors

「2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」」をシェアする

記事作成:
記事URL:

TOP > > > 2.8kbの洒落たjQuery画像ギャラリープラグイン「Orbit」

前の記事:
次の記事:[雑談]Twitterアカウント中の人心得7か条

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more