カルーセル | selatan

某所で楽天の http://www.rakuten.ne.jp/gold/mellow/sukuroru.htm が終端でストップするので、エンドレスになるライブラリがないかという記事がありました。

しかし探してはみるが、なかなかないもんなんですね、これが。

でも、アフィリエイトする人には魅力に映るのかもしれませんが、閲覧者には「ウザッタイ」だけなのかもしれません。

とにかくいろんなのがあります。自動にならないもの、終端で先頭に戻るもの、勿論さっと見ただけで動作を細かくチェックした訳ではありません。

http://sorgalla.com/projects/jcarousel/
http://www.efectorelativo.net/laboratory/noobSlide/
http://www.dynamicdrive.com/dynamicindex14/carousel.htm
http://billwscott.com/carousel/
http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=fr
http://www.twospy.com/galleriffic/index.html
http://devthought.com/blog/projects-news/2008/06/barackslideshow-an-elegant-lightweight-slideshow-script/
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
http://www.serie3.info/s3slider/
http://www.intrepidstudios.com/projects/jquery-just-another-carousel/demo.aspx
http://www.prototype-ui.com/
http://web.enavu.com/tutorials/making-an-infinite-jquery-carousel/
http://miedlar.com/dev/carousel
http://zendold.lojcomm.com.br/icarousel/
http://developer.yahoo.com/yui/carousel/
http://www.enova-tech.net/lab/jMyCarousel/

ここではそのキャプチャ画像から最後の jMyCarousel に目を付けました。
そしてサンプルを作って見ました。（別ウィンドウ）
http://utara.jp/supp/jmycarousel.html

画像は「自由に使える」サイトのものを利用して、 22 枚あるので、モニタ・サイズが 3200 以上でなければ、途切れることはありません。
枚数と幅でモニタ・サイズを切ると、終端が右にある時、一時的に切れますが、数秒以内に先頭がくっつき元通りになります。

Gulim

元々カルーセル機能しかないので、拡大表示には HighSlide を適用させていますが、勿論 LightBox, ThickBox などのライブラリも使えるでしょう。（サンプルでカーソルがルーペになるもの）

サンプルのソース概略 <head>

<head>
<link rel="stylesheet" type="text/css" href='パス/highslide.css' />
<script type="text/javascript" src="パス/script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="パス/script/jMyCarousel.js"></script>
<script type="text/javascript" src="パス/script/highslide-full.js"></script>
<script type="text/javascript">
//<![CDATA[    
    hs.graphicsDir = 'パス/script/highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
    hs.outlineType = 'rounded-white';
    hs.wrapperClassName = 'wide-border';
//]]>
</script>
<script type="text/javascript">
    $(function() {
        $(".jMyCarousel").jMyCarousel({
            visible: '100%',
            auto: true,
            speed: 1800
        });
    });
</script>
<style type="text/css">
div.jMyCarousel ul li {
    border: 1px solid #fff;
    line-height: 0;
    margin: 20px 10px 0;
    vertical-align: top;
}
</style>
</head>

サンプルのソース概略 <body>

<body>
    <div class="jMyCarousel">
        <ul>
            <li><a href="img/V/2001091102.jpg" class="highslide" onclick="return hs.expand(this)" onkeypress="void(0)"><img src="img/Vr/2001091102-w100-h150.jpg" width="100" height="150" alt="" /></a></li>
            <li><a href="http://www.ubuntulinux.jp/" onkeyup="void(0)" onmouseup="window.open(this.href,'ubuntulinux');return false;" title="Uuntu JAPAN"><img src="img/Vr/2001092402-w100-h150.jpg" width="100" height="150" alt="" /></a></li>
            以下省略
        </ul>
    </div>

イメージにキャプションをとも思ったのですが、js ファイルには <ul><li> の指定になっているので、<li><dl> なども試して見ましたが、失敗に終わりました。 lisence.txt を読んでいないので、js には手を付けていません。というより、キャプションを付けたいなら、閲覧者側に立って考えると、やはり、アイテムを一時的にストップさせた方がいいのではと考えます。

selatan

「カルーセル」タグアーカイブ

フルサイズ・ノンストップ・オート・カルーセル

HamRadio Ubuntu WordPress