水曜, 2月 21, 2018

jQueryビフォーアフターBefore-afterをJoomla!で使う

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

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

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

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

 

 
 
 

Before After

 

<HTML変更点>

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

{codecitation class="brush:html;"} {/codecitation}

 

<Javascript 変更点>オリジナル全文はこちら

変更前(オリジナル)1行目

{codecitation class="brush: javascript;"} $(document).ready(function() { {/codecitation}

変更後 1行目

{codecitation class="brush: javascript;"} jQuery(document).ready(function($) { {/codecitation}

この記事をソーシャルネットワークにシェア またはEverNoteにクリップできます

Submit to FacebookSubmit to TwitterSubmit to LinkedInこのエントリーをはてなブックマークに追加 Clip to Evernote
Share
先頭へ戻る