• かちびと.net

    短いjQueryコードでレスポンシブWebデザインに対応したシンプルなスライドショーを作るTipsをご紹介。配布ライブラリに頼らず、簡単なものから書いてみることにします。

    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コードでレスポンシブWebデザインに対応したシンプルなスライドショーを作ってみる

スポンサーリンク

この手のは沢山出回っているので今更
っていう感じの話題ですけど、個人的
にはどのライブラリも利用しやすい
感じではなかったので簡単なコード
で出来るものを作ってみます。

最近、人気のスライダー系プラグイン、Nivo SliderがレスポンシブWebデザインに対応しました。

The Nivo Slider is Responsive!

これ以外にもググればプラグインは沢山出てきますので、選択肢は沢山ありますが、短いコードで済むに越した事は無いので試しに書いてみます。

Sample

Sample on jsfiddle


jQuery

$('img:gt(0)').hide();
setInterval(function() {
    $('img:first-child').fadeOut(0).next('img').fadeIn().end().appendTo('div');
}, 4000);​

コードは特別な事はしていません。最初の画像以外非表示にしておいて、あとは順番に画像の表示、非表示を繰り返すだけのものです。エフェクト何も考えてないのでちょっとチカチカしますね。ごめんなさい。

CSS

div {
    position:relative;
    width: 100%;
    max-width:450px;
    padding:0;
    margin:0 auto;
}
div img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

CSSもMedia Queriesは使用しません。画像を包括するボックスのサイズをFluidレイアウトと同じ要領で%指定。Youtube等をレシポンシブWebデザインに対応させるのと同じ方法ですね。記事タイトルでは、jQueryでレスポンシブWebデザインに対応、みたいに思えてしまいますが、実際はCSSだけで対応します。

ただし、IE6はmax-widthが使えないのでこのままでは全画面表示になってしまいます。IE6でも表示を崩さないようにするにはハックが必要になりそうです。

HTML

<div>
    <img src="foo.jpg">
    <img src="bar.jpg">
    <img src="hoge.jpg">
    <img src="huga.jpg">
</div>​

HTMLもシンプルで済みます。

レスポンシブWebデザインにするという事は、スマートフォン等でも閲覧できる事を視野に入れている事が殆どですが、それならやはり表示スピードが気になります。それに、スマートフォン用のスライドショーにそんなに高機能な物は不要に感じます。Nivo SliderがレシポンシブWebデザインに対応しましたが、やはり重いですね。で、ふとコード量だけでも抑えたいな、と思って簡単なものから書いてみました。あとは必要に応じてコードを足していけば最小限に抑えられるんじゃないでしょうか。配布されているライブラリよりは軽量なコードで済ませられそうです。

URL :
TRB :

Comments & Trackbacks (6)

  1. shinji

    大変不躾な質問で申し訳ありません。
    このスライドショーを試してみようと思い、jsfiddleのコードをそのまんまコピ&ぺしたのですがうまくいきません。
    画像が縦に4つ並び、その後1つずつ消えていき、最後の1つになってからようやくjsfiddleのサンプルのように動き出します。

    私の不得手だと思いますが、何故だかお分かりになりますでしょうか?
    御返信いただけたらありがたいです。

    • シロ

      はじめまして、こんにちは!

      このスライドショーを試してみようと思い、jsfiddleのコードをそのまんまコピ&ぺしたのですがうまくいきません。
      画像が縦に4つ並び、その後1つずつ消えていき、最後の1つになってからようやくjsfiddleのサンプルのように動き出します。

      サンプルで書いたマークアップ及びコードは大雑把なものになります。
      例えばCSSは

      div img

      と書いていますが、これではdiv内の全ての画像にスクリプトが適応されます。

      また、jQueryのコードも同様にWebサイト内の画像全てに適応されます。

      最後に動き出す、との事なのでスクリプトは動いています。おそらく、他のCSSでposition: relative;を上書きしているのでは無いかと思います。

      セレクタをユニークな物に変更してトライして下さい。

      「コピペでうまく動かない」というのは不自然ではなく、むしろ自然な事です。この件は別件の記事でも書きましたので参考にして頂ければ幸いです。

      http://kachibito.net/web-design/wordpress-with-jquery.html
      上記記事の「最初から何しても動かない」の項目にヒントが有ります。

      参考になれば幸いです!

      • shinji

        さっそくの返信有難うございます。
        セレクタ工夫して設置してみます。
        有難うございました!
        ★ლ(╹◡╹ლ)

        • シロ

          がんばってくださいねー!ლ(╹◡╹ლ)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services