logoMemo クラウド環境でのメモ帳

長年愛用してきたImage Rotatorの開発が凍結され、iPadで動くスクリプト提供の予定はない。Windowsでの機能は十分なので2008年頃のスクリプトを今も使っている。しかしiPadでは動作しない。Flash Playerをサポートしていないからだ。開発コミュニティに聞くと、2010年からjQueryを使ったスライド用スクリプトがたくさんあるからだという。

そこで私もjQueryを使うことにした。Image Rotator風のマウスを重ねると再生コントロールが表示され、自動・停止・前後の写真表示ができるスクリプトを作成することも可能だ。

jquery.min.jsとcycle.jsを統合して、slide.jsを作った。HEADにスクリプトを書いて、下記の例のようなHTMLコードを書くだけでよい。

<script src="slide.js"></script>

jQuery Cycle Plugin - Image Rotator

<script>
$('.rotator').cycle({
        fx: 'fade',
        timeout: 3000
});
</script>
<div class="rotator">
    <img src="/script/photo/001.jpg" alt="001" />
    <img src="/script/photo/002.jpg" alt="002" />
    <img src="/script/photo/003.jpg" alt="003" />
</div>

jQuery Cycle Plugin - Hover Controls

 

※JQueryはほかのプラグインでも使われるので併用するときは、jquery.min.jsとcycle.js(プラグイン部分のみ)を呼び出す。

MemoサイトのTemplateにjqueryとbootstrapを含めたので、個別ブログ記事では、cycle.jsを呼び出すだけでよい。

※Webにはバージョンが分かるように下記フォルダーに保存
  /script/jquery/min1.7.1.js
  /script/jquery/cycle2.88.js

※Prev,Nextなどの代わりに画像アイコンを使ってもよい。

Fancyboxにスライドショー機能が追加されたので、cycleを代替可能である。

<script type="text/javascript">
$(function() {
    $('#pause').click(function() { $('#slides').cycle('pause'); return false; });
    $('#play').click(function() { $('#slides').cycle('resume'); return false; });
    $('#slideshow').hover(
        function() { $('#controls').fadeIn(); },
        function() { $('#controls').fadeOut(); } );
    $('#slides').cycle({ fx:'fade',speed:400,timeout:3000,next:'#next',prev:#prev' });
});
</script>
<div id="slideshow">
    <div id="controls">
        <span><a href="" id="prev">Prev</a></span>
        <span><a href="" id="next">Next</a></span>
        <span><a href="" id="pause">Pause</a></span>
        <span><a href="" id="play">Play</a></span>
    </div>
    <div id="slides" class="pics">                           
        <img src="../photo/001.jpg" /> 
        <img src="../photo/002.jpg" /> 
        <img src="../photo/003.jpg" /> 
        <img src="../photo/004.jpg" /> 
    </div>
</div>

ブラウザ使用率 BACK | HOME | ARCHIVE Mediabox