WebDesign Dackel

jQueryで画像切り替えをする為のプラグインを書きました

jQueryで画像切り替えをする為のプラグインを書きました

Hatena0
Google+0
Pocket0
Feedly0

以前、On、Offの画像を切り替えるプラグインを書きました。
年末を使って、Githubのリポジトリの整理がてら、プラグインを書き直してみました。

プラグインの概要

<img>タグや背景画像に指定した画像の切り替えを行うプラグインです。hoverなどのアクションで_onの接尾辞が付いた画像へと切替えます。
例えば、images/btn.pngimages/btn_on.pngに切り替えるといったものです。

これまでの不満点

この手のプラグインやスクリプトはGoogleで調べればすぐに出てくるのですが、細かい点で自分なりに満足できるものがありませんでした。
例えば…

  • 既にOn用の画像を指定してしまっている場合や、切り替え後の画像が無いと表示が崩れる
  • 切替時のアニメーションを細かく制御したい
  • hoverには対応しているけど、自分のタイミングで切り替えを行いたい場合もある
  • タッチデバイスで動作しない
  • etc…

こだわり

上記で挙げた不満点から、下記の点にこだわっています。

  • hoverアクションをタッチデバイスに対応
  • hoverだけで無く独自のタイミングで切り替え
  • 切替時のアニメーションを独自で拡張可能
  • プラグインの一時無効/有効が出来る
  • 404など切替用画像の読み込みに失敗したらその先の動作をキャンセル
  • 切り替え前、後などのタイミングでイベント/コールバックをサポート
  • プラグインの削除に対応 (destroy)

イベントやコールバックを作っておくことで、他の動作との連携が取りやすいように配慮してみました。
また、処理が不要になったらプラグインの実行前に戻すためのメソッドを実装しています。

サンプル

実際の動作は下記を参照して下さい。それぞれのメニューから動作を確認することが出来ます。

デモページ

デモページ

ダウンロード

GitHub

使い方

少し長くなりそうだったので、詳細はこちらのブログではなくGithubで確認して下さい。(年始なので手抜きで…)
オプションの設定やコールバック、イベント、Dataメソッドについて記載しています。

Githubからファイル一覧を落としてみると、examplesというディレクトリが入っています。
この中のファイルを見てみると分かりやすいかと思います。

バージョンアップに伴ってexamplesフォルダはなくなりました。

基本的な使い方

jQueryjquery.image-changer.min.jsを読み込みます。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.image-changer.min.js"></script>

対象となるHTMLをマークアップします。

<a class="rollover" href="http://example.com" ><img src="path/to/image.jpg" alt="image"></a>

.rolloverに対して、プラグインを実行します。

$(document).ready(function(){
    $(".rollover").imageChanger();
});

オプションの設定

デフォルトでは下記の様にオプションが指定されています。

$(selector).imageChanger({
    suffix: "_on", //切り替え画像ファイル名の接尾辞
    hover: true, //hoverアクションで切り替えを行うか
    transition: { //切り替えのアニメーション設定
        type: "fade",
        duration: 150,
        easing: "linear",
        opacity: 0
    },
    backgroundImage: false, //背景画像の切り替えか
    imageTypes: "jpg|jpeg|gif|png", //切り替え画像の画像拡張子

    // コールバック(詳細はサンプルかGithubを参照下さい)
    beforeInit: false,
    afterInit: false,
    beforeChange: false,
    afterChange: false,
    beforeOnImage: false,
    afterOnImage: false,
    beforeOffImage: false,
    afterOffImage: false
});

transitiontypeにはデフォルトで4つの指定が用意されています。

  • "fade": クロスフェードで切り替えます。
  • "slide": 画像を上下左右にスライドして切り替えます
  • "wink": 一度On画像を表示して、元の状態に戻します
  • false: アニメーションせずに画像をぱっと切り替えます

また、jQuery.imageChanger.registerTransition()というメソッドを用意していて、これを使うことで独自の切り替えアニメーションをビルトインとして登録することが出来るようになっています。
※詳細はGithubでご確認下さい。。

対応ブラウザ

IEは7から、Androidは2.3と、4.4で確認しています。Operaに関しては未検証です。

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • iOS5 +
  • Android2.3 +

ライセンス

MITライセンスです。個人/商用問わず、是非使ってみてください。

まとめ

まだ実案件では使えていないのですが、使ってみて改善するべき箇所は改善をしていく予定です。
もしこのプラグインが気になって、使って頂けたら改善点など頂けたら最高に嬉しいです!

追記

2015.04.08

ちょこっとバージョンアップしました!

jQueryの画像切り替え用プラグインをバージョンアップしました