○デモ1○デモ2○デモ3ループスライダーは画像を右へ左へ動かすギャラリーとは少し違う動的なコンテンツです。ギャラリーは同じ場所で画像が次々に入れ替わるのにたいして、ループはコンテンツエリア内を一枚から複数枚の画像を左右、あるいは上下に無限スライドさせる視的効果です。CSS3はブラウザに未対応が多いので却下、JavaScriptは、これもブラウザ依存が激しいので、結局はjQueryで対応することにしました。これが実現すれば、かなり動的なコンテンツが実現できそうです。ギャラリーを理解しよう!まずはループ先となるサムネイル付のギャラリーを探していたのですが、とてもシンプルで良いjQueryサイトを見つけましたので紹介します。jQueryでサムネイル付きスライドショーをシンプルに作成する方法サンプルファイル(ZIP)やコードの解説など、他にも色々なjQueryを分かりやすく紹介しているサイトで、WEBクリエイターにはオススメのサイトです。導入の仕方は上記のサイトで詳しく書いています。サムネイル付スライドギャラリーデモ上記のデモが解説されているスライドショーを元にカスタマイズした物です。下記が今回カスタマイズしたHTMLです。/&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;サムネイル付きで画像が自動で変化し、またサムネイルをクリックすると画像が替わるjQueryです。深く掘り下げると「slideshow」という「ID」の付いた「DIV」タグエリアの中がギャラリー部で、下のサムネイル部を「ul」で連動させて、選んだサムネイルをクリックすると画像が映し出されるしくみになっています。画像のサイズも変更が可能で、CSSも合わせてカスタマイズができます。画像を増やす事も可能でID名の変更で、これだけでも十分、サイトのトップに使える機能です。次にCSSをについて。hidden;}&lt;/style&gt;画像の大きさに合わせて幅や高さをCSSで変更したり、また位置を変えるだけで様々な要望に答えられると思います。紹介サイトでは4つのバリエーションのスライドショーが紹介されていました。これが参考サイトが公開しているソースです。1行目はjQueryを動かす本体へのリンクが張られていますが、すでにjQueryを導入している方は必要ありません。それでも動かない時は記載するか、サンプルJSファイル(ZIP)をダウンロードしてください。ループスライダー等のスクリプトが動かなくなった不具合について。jQueryのバージョンアップに伴う不具合と判明いたしました。});});&lt;/script&gt;スクリプト部のコメントアウトに、気付いた点を補足しております。「hoverでスライド動作ストップ」は追記しております。上記のスクリプトのソースは紹介サイトの下の赤丸からダウンロードすることができます。ほとんど紹介サイト通りに行えば理想的な導入も可能だと思います。このサイトのクリエイター様には脱帽します。ありがとうございました。ループスライダーを理解しよう!目標はループするサムネイル付のギャラリーの導入ですので、次にループスライダーjQueryの導入を検討します。wordpressには同時にできるプラグインがあると思いますが、wordpressでないWEBページでの方法として思いつきました。「一挙にできるよ」というのをご存知の方は教えてください。ループスライダーを探しただけでも沢山のjQueryがあることがわかりました。CSS3の互換性が向上すればCSS3で対応したかったのですが、まだまだ先のようです。いうわけで、調べているとギャラリーと同じクリエイター様がループスライダーも開発していたので導入しようと試みました。動作確認してみると、どうやら上記のループスライダーはサムネイルリストからクローン(スクリプトコピー)を作り、それをループさせるシステムのようでした。画像をループさせる分には大変よかったのですが、なぜかクローン(ジャバスクリプトでコピー)したサムネイルにリンクが張れない現象が起きてしまい、他のjQueryで試してみることにしました。してたどり着いたのが下のサイトです。無限に横方向にスクロールするjQueryプラグインこのサイトもかなり親切に解説していて良いサイトでした。サンプルフォルダ(ZIP)があるので、ダウンロードして使ってみてください。使い方が詳しく書いてありますので、早速ここでリストをループさせてみましょう。※2014年7月ワードプレス上での動作不具合が発覚。復旧までループの動きはコチラをご覧ください。※7月8日不具合は復旧いたしました※ループスライダーデモ問題¥くループしています。左右への切り替えが自由で、オプションのクラスを変えるだけで、同じページに幾つもループコンテンツが使えてかなり便利なjQueryでした。最初に調べたループスライダーと同じく、ループする画像のリストからクローン(スクリプトでコピー)することは同じで、クローンされた画像に対して無反応な現象が起きました。探せば同時に行えるjQueryがあると思いますが、英語版であるとか、複雑すぎて扱えたとしても実装後に不具合が起きた場合、対処に困る危険があります。システムエンジニアさんならば問題ないのですが、天城スタジオはWEBデザインが中心なのでシステムを使ったものが作れないのです。考えた挙句、初めに戻りギャラリーを変えれば、複合動作が出来るかと他のjQueryを試しましたが残念ながら、クローンリストへの反応がどれもありませんでした。「javascript」の勉強をしてみると、どうやらクローンされたリストの「a」タグについている「javascript:void(0);」がリンクをさせない命令を発動して、それ以降の動作が行われていないようでした。ループスラーダーギャラリーのサンプルはコチラをごらんください。hidden;}&lt;/style&gt;ギャラリーについては同じ物を使っていますが、関数に値を与えた別にスクリプトを使っています。「ID」を変えないと動作しないようなので、同時に関数に値を与えないといけないようです。詳しくは、ギャラリーで紹介したサイト「BlackFlag」様から複数入れる方法が紹介されていたので引用させていただきます。切り分け用のナンバリングをすることで実現可能かと思っています。(スクリプトはスライドショー2つ分記述するので長くなってしまいますが・・・)参考までにサンプルファイルを用意しましたので必要あれば下記URLよりダウンロードして中身をご確認ください。」とても丁寧に教えてくれています。下はサンプルファイルのアドレスです。興味のある方はコピペしてダウンロードしてみてください。(直接リンクはしておりません)http://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShow3DUAL.zipCSSについては、IDを変更しているので、これも別にCSSを用意しなければなりません。left;}のように書き足します。left;}と、カンマで区切ると簡単ですね。スクリプト部に注訳を入れて説明していますが、簡単に言えばIDに合わせて書き換える場所があるということです。コピーして注訳部を変えると1ページに幾つでも作ることが可能です。書き換えた後は、同じスクリプトファイルやスクリプト部に記載しても問題ありません。「BlackFlag」様のサイトでは、別ページへリンクさせる方法なども説明されていますので、よければご覧下さい。何が力技かと言いますと、このページのソースを見ていただければ分かると思いますが、画像「img」を表示させている「div」と「li」をそれぞれコピーしてHTMLに2倍にして記載しているところです。HTMLは長くなりますが、ループの原理として「元の画像をクローンが追いかけて、本来HTMLに存在しない画像をクローンが表示させ、本体が消えたところでリロードして無限ループさせているからです。そこで動作可能な本体を2倍にすることで、クローン部が表示される前にリロードさせれば本体だけでループが可能というわけです。サムネイル部にリンクを必要としない場合は、この「img」のHTMLへのコピーは必要としません。注意点はギャラリー部の「img」も2倍にコピーして対応しないという点です。ループスライダーの説明を致します。'px',//通常はここの値が2です。/&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;ループスライダーjQueryのサンプルとして、スクリプトソースからHTMLとCSSをまとめて書き出していますので、「HTML」の「body」にコピペして動作確認してみてください。補足までに、このページで作ったループスライダーギャラリーのHTMLソースはこうなりました。綺麗なソースではないのでお見せしたくありませんが参考になればと思います。/&gt;対応したループスライダー部のスクリプトとCSSです。違いはクラス名が違うところと、リストの幅を2倍にするスクリプトの値をを2から1にしているところです。箇所はコメントアウトに「通常は2:ここを1にして、表示させないようにしている。v0.1は上記で導入しているので割愛しています。'px',//通常は2:ここを1にして、表示させないようにしている。このサンプルで作った「ループスライダーギャラリー」は基本的な構造です。なにより軽く理解しやすいスクリプトで、不具合に速対応できるところが魅力的です。なにも分からないでjQueryを使っていると後でとんでもない事になってしまいますから。現在のところ、ファイヤーフォックスとIE10、スマフォでの動作確認はできております。この視覚効果を実現する為にお世話になりました。「http://wood-roots.com/」様には、心から感謝しております。他にもループスライダーやサムネイル付ギャラリーを紹介した良い感じのサイトがあったので紹介しておきます。ループスライダーsmoothDivScroll:複数のサムネイル画像を左右に自動スライドさせるjQuery上記は海外ループスライダーを紹介しています。jQueryプラグイン-Galleriffic上記も海外サイトのギャラリーを紹介しています。双方ともに機能性が高いですが、なにぶん複雑でオプションを使いこなせませんでした。エンジニアの方には良い参考になるかもしれません。以上、ループスライダーギャラリーを導入しようでした。追記2015年10月8日モバイル対応処理のため、動作確認はデモとしてリンク先に置きました。このスクリプトは同時に使うと不具合が起きやすく、一つのページで同時に使うことはお勧めいたしましません。ソースがわかり易いので、スクリプトの勉強に参考にしてください。Reserved.天城スタジオ。