[サイト製作日記]jQueryビフォーアフターBefore-afterをJoomla!で使う

You are here: Home

サイト製作日記

2011年 3月 17日(木曜日) 15:19

ｊQueryを使った画像比較エフェクト”before-after”にはいくつかのバラエティがある.。

１月のサイト製作日記ではその1つを紹介していたが、マウスのドラッグの必要がなく、マウスオーバーだけでスライドが移動する点ではこちらのタイプが使いやすそうだ。ちなみにこれは今回の東北地方太平洋沖地震では海外のニュースサイトABCでも使われている。

”before-after”はいずれもライブラリにjQueryを使っているため、mootoolsを標準実装しているJoomla!で使うにはライブラリのバッティングを避ける工夫と、javascriptにも多少手を加えねばならないようだ。

Javascriptは習ったこともないので、jQuery.comの解説などを読んで試してみたところ動作するようになった。

＜HTML変更点＞

mootoolsとjQueryの併存のための記述

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
  <script type="text/javascript" src="/plugins/system/jqueryintegrator/jquery.noconflict.js"></script> 
  <script type="text/javascript" src="/media/system/js/mootools.js"></script> 
  <script type="text/javascript" src="/beforeafter/jquery.qbeforeafter.js"></script>

＜Javascript 変更点＞オリジナル全文はこちらで

変更前（オリジナル）１行目