クロスブラウザに対応したベーシック
で汎用性のありそうなスライダーを
実装出来るjQueryプラグインのご紹介。
The Lof JSiderNewsは派手な装飾も
無く、シンプルで欲しい機能は揃え
てくれている印象です。
なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ
今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。
The Lof JSiderNews
サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。
デザインは6種
例として2つキャプチャ撮りました。ナビゲーションがやや大きめのもの。たまに見かけますよね。これはナビゲーションは縦にスライドします。サムネイル無し、というタイプも。easing併用でアニメーションエフェクトもいろいろ選べます。
クロスブラウザ
IETesterでのIE6のキャプチャです。透過処理以外は他ブラウザと変わりなく動作しました。
コード
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
next:$('#lofslidecontent45 .lof-next') };
$obj = $('#lofslidecontent45').lofJSidernews( {
interval : 4000,
direction : 'opacitys',
easing : 'easeInOutExpo',
duration : 1200,
auto : false,
maxItemDisplay : 4,
navPosition : 'horizontal', // horizontal
navigatorHeight : 32,
navigatorWidth : 80,
mainWidth:980,
buttons : buttons} );
});
</script>いろいろ設定。easingを使っているのでエフェクトもいろいろ選べますね。動きはリファレンスで確認出来ます。
マークアップ
<ul class="lof-main-wapper">
<li>
<!--メインに表示させる画像-->
<img src="images/thumbl_980x340.png" title="Newsflash 2" >
<div class="lof-main-item-desc">
<!--キャプション等-->
<h3><a target="_parent" href="#Category-1">/ Newsflash 1 /</a> <i> 日付とか</i></h3>
<h2>見出し</h2>
<p>キャプション
<a class="readmore" href="#">Read more </a>
</p>
<!--ここまでキャプション-->
</div>
</li>
・
・
・
</ul>
</div>
<div class="lof-navigator-wapper">
<div onclick="return false" href="" class="lof-next">Next</div>
<div class="lof-navigator-outer">
<ul class="lof-navigator">
<!--サムネイル-->
<li><img src="images/thumbs/thumbl_980x340.png" /></li>
・
・
・
</ul>
</div>
<div onclick="return false" href="" class="lof-previous">Previous</div>
</div>マークアップも単純です。
結局普通が一番ですね。サムネイルの見せ方が結構好きです。デモ等は以下よりどうぞ。ダウンロードページまで分かり難いのでついでに直接貼っておきますね。