jQuery Slide

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

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

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

jQuery Cycle Plugin - Image Rotator

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

 

jQuery Cycle Plugin - Hover Controls

bootstrap/jquery機能を使うときは、cycleプラグイン(cycle.js)を呼び出す。
※コントロールボタン付き(写真サイズ 960x540)の例:cycle.html

※写真サイズ 400x200 で表示した例
<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>
"