• かちびと.net

    ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNewsのご紹介です。クロスブラウザにも対応しており、使いやすいイメージスライダーです

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews

スポンサーリンク

クロスブラウザに対応したベーシック
で汎用性のありそうなスライダーを
実装出来るjQueryプラグインのご紹介。
The Lof JSiderNewsは派手な装飾も
無く、シンプルで欲しい機能は揃え
てくれている印象です。

なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどw

今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。

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>

マークアップも単純です。

結局普通が一番ですね。サムネイルの見せ方が結構好きです。デモ等は以下よりどうぞ。ダウンロードページまで分かり難いのでついでに直接貼っておきますね。

The Lof JSiderNews / Download Page

URL :
TRB :

Comments & Trackbacks (15)

  1. sato

    Demo6でスライド内のリンクが機能しないですね。
    一番下のスライドのリンクが一番上まで反映してしまいます。

    • シロ

      配布されているファイル内のDemo6のリンクは機能しているようですが御覧いただけましたでしょうか?

  2. degi

    「opacity」に設定した状態で画像にリンクを貼れないのは仕様のようですね。
    カスタマイズを試しているけどなかなかうまくいきません><

    • シロ

      こんにちは :D

      「opacity」に設定した状態で画像にリンクを貼れないのは仕様のようですね。

      申し訳ありません、どの部分のお話でしょうか?ちょっと把握しかねますのでご説明頂けると助かります :)

      「direction : ‘opacitys’,」ですか?それともcssでしょうか?

      • degi

        こんにちはシロさん、唐突に失礼いたしました。
        [direction:'opacity',]の方ですね。

        スライドのエフェクトがフェードで、
        メイン画像をクリックしたら、それぞれ指定したリンク先に飛ぶ様な仕様にしたいと思い、
        下記の様に設定いたしました。

        $(document).ready( function(){
        $(‘#lofslidecontent45′).lofJSidernews( { interval:4000,
        direction:’opacity’,
        duration:1000,
        easing:’easeInOutSine’,
        auto:true } );
        …..




        するとmain-wapperリスト内の画像にリンクを貼った場合、
        一番下のリンク(#4)しか選択出来なくなりました。
        scriptを見た所、画像の透過度を変化させて画像を切り替える仕様だと思うんですが、
        合わせてz-index値を変化させれば行けるか?と思って試したところ、
        今度はリンクを選択しても飛ばなくなりました。
        (ポインターは出るけどクリックしてもリンク先に飛ばなくなりました。)

        javascriptの知識がなく手探りでの推測なので、違ってたらごめんなさい。
        こちらでお話するのも少々お門違いだと思うのですが、
        satoさんも恐らく同じく仕様で悩まれてるのかと思い、お話させて頂きました。

        とてもアクセシブルで使えそうなプラグインなだけに、その辺をどうにかしたいと思っています。

        • シロ

          こんにちは。すみません、ご説明頂き有難うございます :D

          メイン画像をクリックしたら、それぞれ指定したリンク先に飛ぶ様な仕様にしたい

          あまり時間がなくてちゃんと調べられてないのですが、「direction:’opacity’,」は画像を順にopacity:0;にしているため、一番最後の画像のリンクが全てに適当されてしまうようです。

          ちょっとわかりにくいかもですが、複数画像が同じ場所に重ねられていて、1つづつ透過処理を繰り返している、という仕様です。そのため、見えないだけで、実際に画像はそこに存在するので一番上(ソースコードでいう一番最後の画像)のリンクしかクリックできない、という感じです。

          よくあるスライダーでリンクが出来るのはopacity:0;ではなく非表示(hide)しているからで、このスライダーは少々変わった方法でフェードエフェクトを適応させているみたいですね。

          これを適応させるにはある程度jsの知識が必要かもです・・・
          現在、エフェクトにはeasingが併用されていますので、easingをやめて
          普通にfadeIn()メソッド等を使えば実現可能ではないかと思います。

          ぜひトライしてみてください:)

          • degi

            ご返信ありがとうございます。
            たった今、スクリプトの274行目あたりを下記の様に
            z-indexを書き換えるように指定したら、それっぽい仕様になりました。
            山勘なので色々バグってそうで怖いですが。


            274 fxStart:function( index, obj, currentObj ){
            275 if( this.settings.direction == 'opacity' ) {
            276 $(this.slides).stop().css('z-index',0).animate({opacity:0,}, {duration: this.settings.duration, easing:this.settings.easing} );
            278 $(this.slides).eq(index).stop().css('z-index',1).animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );

            取りあえずこれで様子を見てみようと思います。

        • シロ

          おっ、いけましたか!それはなによりですー!

  3. hamars

    IE8/7/6だと最後のレンダリング時(だと思いますが)相当重たいですね。
    ECサイトの商品単体ページで使ってみましたが、レスポンスが遅いので相性が悪く
    これさえなければとても使い易くなりそうです。
    今頑張って修正できないか試しています。

    • シロ

      こんにちは!

      IE8/7/6だと最後のレンダリング時(だと思いますが)相当重たいですね。
      ECサイトの商品単体ページで使ってみましたが、レスポンスが遅いので相性が悪く
      これさえなければとても使い易くなりそうです。

      あれ・・・そうですか・・当方の環境ではあまり重さは感じませんでしたが・・
      単体ページでも重いとなるとちょっと微妙かもですね。

      なんとか修正できるようお祈りしていますー!

  4. なべ

    いつも大変お世話になっております。
    昔の記事を今更利用させていただく、時代ハズレのもので恐縮です。
    リンク先がnot foundになってましたので、
    お知らせ致しました。
    ググればわかることなんですが、下記になってました。
    http://www.landofcoder.com/jquery-plugin/127-lof-jslidernew-plugin.html#tab-tab-features

    wordpressのプラグインとか作り方とか、フリーソフト特集とか、
    いつもお世話になってました。
    今後とも期待してます。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services