以前の記事でメモっておいた、jQueryプラグインのBefore/Afterを使ってみた。
以前の記事はこちら
で、下記のコードでとりあえず問題なく実装できました。
html
<html>
<head>
<title></title>
<script type=”to/path/jquery.js”></script>
<script type=”to/path/jquery-ui-1.7.2.custom.js”></script>
<script type=”to/path/jquery.beforeafter.js”></script>
<script type=”to/path/javascript”>
$(function(){
$(“#beforeAfter“).beforeAfter();
});
</script>
<body>
<div id=”beforeAfter“>
<div><img src=”images/before.jpg” alt=”before” width=”320″ height=”240″ /></div>
<div><img src=”images/after.jpg” alt=”after” width=”320″ height=”240″ /></div>
</div>
</body>
</head>
こんな感じです。
が、ちょっとだけ注意点が…
それは、画像のパスです。
ダウンロードページから、プラグインをダウンロードすると、「ｊｓ」というフォルダーの中に、プラグイン本体と、使用する画像が3つ入っています。
で、プラグイン本体のコードに記述されている、使用する画像のパスを、直接変えてやらないと使用できませんでした。
変更したのは、48行目にある「handle.gif」のパスと、５９行目にある「lt-small.pngとrt-small.png」の３カ所です。各々のパスを、htmlからみたパスで記述したら、OKでした。
因みに、optionも指定できるようになっていて、
$(function(){
$(“#beforeAfter”).beforeAfter({
animateIntro : true,
introDuration : 500
});
こんな感じで、指定します。{}を忘れないように注意。
詳しくは、ダウンロードページに色々書いてあります。
Comments