Cycle2

フロントページのキービジュアルにはDrupalのモジュールのViews Slideshowを使うことが多かったのですが、jQuery のスライドショープラグインで、Views Slideshowだけじゃできない色んな演出をするのに使わせてもらうようになりました。

Skitter:かなり派手な画像遷移のアクションを組み込めます。アクションはランダムにも個別にも設定できます。リンク先のSkitterホームページではサムネイルを表示することもできます。ギアのアイコンを開いて、色々設定して、コードを提供してくれるとても親切なサイトです。

Grid Slide:複数の画像をまとめて、アニメーション表示してくれます。

jCarousel同名のプラグインはよく使われていますが、これはスマホのスワイプで画像切替を実装できるプラグインです。

他にも素晴らしいプラグインがたくさん配布されているのですが、jQueryのバージョンで他のプラグインや自分のスクリプトと衝突して動かなかったり、ブラウザ(特に古いIE!)によっては動かない場合も少なくなく、結構頭が痛いのですが、これ、ちょっと決定的かなと思われるCycle2というプラグインを見つけました。

  • IE8でもOK
  • 追加設定はスクリプトで書くのではなく、<div>タグにdata-cycleという属性を追加するだけ
  • スマホやタブレットのスワイプにも対応
  • スライドする対象も<img>だけでなくタグでいろんな要素を指定することができる
  • さらに追加のプラグインでアクションを追加できる

・・・といったスグレものです。