【jQuery】画像をフェードインさせて表示するプラグイン
jQueryの勉強が楽しくて、時間をついつい忘れてしまいがちなタツノコです。
jQueryの勉強の副産物として一つライブラリが出来上がりました！
目次
画像をフェードインさせて表示させる処理
画像をマウスオーバーした時にフェードインして画像が入れ替わるというプラグインです。
※2018/01/27 プラグインを更新しました
画像が画面外にあっても同じ座標位置でフェードインするようになりました！
動作はこちらから確認できます。
カーソルを当てると、5秒かけて別の画像に入れ替わります。
imageReplace-1.1.jsのダウンロード
ソースコード版
imageReplace-1.1.js
圧縮版はこちら
imageReplace-min-1.1.js
使い方
HTMLタグの設定
フェードイン・アウトさせたいimgタグに以下の属性を追加してください
data-after-img属性
data-after-fade-time属性
設定例
<img src="初期画像のパス" data-after-img="フェードインさせたい画像のパス" data-after-fade-time="フェードインにかけたい時間(ミリ秒)" >
jQueryの設定
・なし
ダウンロードしたJqueryファイルを、scriptタグにて読み込んでもらえれば上記だけで対応できます。
※念のため記述
<script src="https:////ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="imgReplace.min-1.0.js"></script>
※便宜上、元jQueryの読み込みも記述しています。
WordPress対応時期について
未定です。
出来ればやりたいと思ってます。
ただ、fadeinの処理が上手くいかなくて、何かバージョン的な、もしくは
overLayを入れるところが間違えているのかなと思いました。
勉強しつつアップデートしていきます！
最後に、使えそうな使い方
よくある、
「アハ体験」と同じことが出来る！・・・ということはできると思います！
今回はここまで！