WebDesign Dackel

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

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

Hatena0
Google+0
Pocket0
Feedly0

去年の暮れ、空港で飛行機を待っている間に勢いで書いてから、放ったらかしになっていたjquery-image-changer.jsをちょこっとアップデートしましたので、一応ブログに残しておきたいと思います。

基本的な使い方は前回のページに記載しています。

変更点

内部的な変更は少ないのですが、いくつかの変更があります。

  • GitHubのリポジトリ名を変更 (最新はこちら)
  • ファイル名をjquey.imageChanger.jsからjquery.image-changer.jsへ変更
  • サンプルを追加
  • bowernpmのインストールに対応
  • FireFoxで画像が少しずれるバグを修正
  • QUnitによるテストを追加
  • ファイル名の変換をするユーティリティAPIを追加
  • アニメーションの設定をシンプルに定義可能に

デモページ

上記の変更点にあげましたが、ちゃんとしたサンプルが無かったので簡単なページを作りました。

デモページ

デモページ

背景に指定した画像も、<img>もいい感じに切り替わっています。もちろんスマホでも動きますし、ページ最上部のライトは光っちゃいます。

ダウンロード

下記よりダウンロード出来ます。

GitHub

npmから使う場合

$ npm install jquery-image-changer

bowerから使う場合

$ bower install jquery-image-changer

これから追加予定の機能

今はオンとオフの2枚の画像を切り替えるだけですが、これを複数の画像に対応したいなぁと漠然と考えています。

これからもちょこちょこと手を入れていく予定なので、また変更があったらブログにこっそり書こうと思います。

更新履歴

2015年07月15日 APIの追加

バージョン2.0.7から、ファイル名の変換を行うユーティリティ的なAPIを追加しました。
基本的なAPIの使用方法は下記のとおりです。

$.imageChanger("メソッドの名前", ... );

そして今回追加したメソッドは下記の3つです。

  • addSuffix
  • reomveSuffix
  • toggleSuffix

それぞれどんなふうに使うか、簡単な例をご紹介します。

addSuffix – 接尾辞を追加する

指定したファイル名に_onを付けて返します。

console.log( $.imageChanger("addSuffix", "./path/to/img.jpg") );
// => "./path/to/img_on.jpg"

追加する接尾辞は3つ目の引数で変更できます。

console.log( $.imageChanger("addSuffix", "./path/to/img.jpg", "_active") );
// => "./path/to/img_active.jpg"

既に接尾辞が付いている場合、img_on_on.jpgみたいに、接尾辞が連続してしまったりはしません。

console.log( $.imageChanger("addSuffix", "./path/to/img_on.jpg") );
// => "./path/to/img_on.jpg"

reomveSuffix – 接尾辞を削除する

使い方は追加する時とほとんど同じです。

console.log( $.imageChanger("removeSuffix", "./path/to/img_on.jpg") );
// => "./path/to/img.jpg"

console.log( $.imageChanger("removeSuffix", "./path/to/img_active.jpg", "_active") );
// => "./path/to/img.jpg"

console.log( $.imageChanger("removeSuffix", "./path/to/img.jpg") );
// => "./path/to/img.jpg"

toggleSuffix – 接尾辞を切り替える

既に接尾辞がついていれば削除して、ついていなければ追加します。
これも使い方はほとんど同じです!

console.log( $.imageChanger("toggleSuffix", "./path/to/img.jpg") );
// => "./path/to/img_on.jpg"

console.log( $.imageChanger("toggleSuffix", "./path/to/img_on.jpg") );
// => "./path/to/img.jpg"

console.log( $.imageChanger("toggleSuffix", "./path/to/img.jpg", "_active") );
// => "./path/to/img_active.jpg"

console.log( $.imageChanger("toggleSuffix", "./path/to/img_active.jpg", "_active") );
// => "./path/to/img.jpg"

文字列ではなくjQueryオブジェクトに対して実行する

これまでの例では文字列に対して実行していましたが、jQueryオブジェクトの指定を行うことで、中にある<img>srcも切り替えることができます。

例えばこんなHTMLがあるとします。

<div class="sample">
  <img src="img.jpg" />
  <img src="img_active.jpg" />
  <img src="img.jpg" />
</div>

div.sample内の全ての画像に対して_activeをつけようとするとこんな感じで書くことが出来ます。

$.imageChanger("addSuffix", $(".sample"), "_active");
/*
↓ こうなります!
<div class="sample">
  <img src="img_active.jpg" />
  <img src="img_active.jpg" />
  <img src="img_active.jpg" />
</div>
*/

APIの追加以外にもtransitionオプションの設定方法を、簡単に指定できるように変更しました。
詳しくはtsuyoshiwada/jquery-image-changerよりご確認頂ければと思いますー!


jquery-image-changer.jsを導入していて、ファイル名の切り替えをする必要があるときなんかに使えそうかなぁ〜と思います。