Search

jQuery plugin要素のスライド

  1. Coda-Slider
  2. AnythingSlider〔HTMLコンテンツをスライドショー表示〕
  3. bxSlider〔コンテンツスライダー、フェード切替、ティッカー〕
  4. Easy Slider 1.5〔画像やコンテンツのスライド〕
  5. jQuery pageSlide〔ページ全体を左へスライド〕
  6. jQuery.ImageSwitch〔画像を様々な方法でスライドアニメーション切替表示〕
  7. Simple Toggle with CSS & jQuery〔シンプルな要素の表示切替〕
  8. Supersized〔自動的に背景画像をブラウザサイズに合わせてリサイズして、スライドショーする〕
  9. toggleElements〔HTML要素の表示切替〕

Coda-Slider

2010/2/23

Coda-Slider 2.0

MIT＆GPL
jquery.js、jquery.coda-slider-2.0.js、jquery.easing.js

パネルを水平方向にスライドするjQueryプラグイン。

パネルに表示する部分は、HTML要素のため、動画（object要素）を埋め込むことも可能です。 ナビゲーションコントロール（タブと前後移動ボタン）部分は、対象要素内でpanelクラスが指定されているdiv要素を取得して自動表示されます。

スライドの動きは、jQuery Easing Pluginを併用することでカスタマイズ可能です。 下記のようなオプションが用意されているため、スライドの動作や表示を簡単にカスタマイズすることができます。

  • 前後移動ボタンテキストの指定（dynamicArrowLeftText="« left"、dynamicArrowRightText= ight »"）
  • タブの水平方向の表示位置（dynamicTabsAlign:left/center/right）
  • パネルの高さ自動調整の有無（autoHeight:true/false）
  • スライド自動再生の有無（autoSlide:true/false）
  • スライド間隔（autoSlideInterval:4000）
  • 初期選択パネルの指定（firstPanelToLoad:3）
  • タブの垂直方向の表示位置（dynamicTabsPosition:top/bottom）

タブと前後ボタンを水平に並べるなど、ナビゲーションコントロールを自分でカスタマイズしたい場合は、dynamicArrowsおよびdynamicTabsオプションにfalseを指定してこれらの自動表示を無効にすることでハードコーディングできるようになります。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.coda-slider-2.0.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 例1 */
                $('#coda-slider-1').codaSlider({
                    crossLinking:false,                /* クロスリンク無効 */
                    firstPanelToLoad:3                /* 初期選択パネル指定 */
                });
                /* 例2 */
                $('#coda-slider-2').codaSlider({
                    autoSlide:true,                    /* 自動再生 */
                    autoHeight:false,                /* 自動高さ調整無効 */
                    autoSlideStopWhenClicked:false,    /* パネルクリック時にスライドの自動再生を停止しない */
                    autoSlideInterval:3000            /* スライド間隔3秒 */
                });
                /* 例3 */
                $('#coda-slider-3').codaSlider({
                    autoHeight:false                /* 自動高さ調整無効 */
                });
                $('#coda-slider-4').codaSlider({
                    autoHeight:false                /* 自動高さ調整無効 */
                });
                /* 例4 */
                $('#coda-slider-5').codaSlider({
                    dynamicArrows: false,            /* 前後移動ボタン自動表示無効 */
                    dynamicTabs: false                /* タブ自動表示無効 */
                });
                /* 例5 */
                $('#coda-slider-6').codaSlider({
                    autoHeightEaseDuration: 1000,
                    autoHeightEaseFunction: "easeInBounce",
                    slideEaseDuration: 1000,
                    slideEaseFunction: "easeInBounce"
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            /* Insignificant stuff, for demo purposes */
            .panel h2.title { margin:0; padding:0; font-size:110%; }
            /* Most common stuff you'll need to change */
            .coda-slider-wrapper { margin:0; padding:20px 0; }
            .coda-slider { background:#ebebeb }
            /* Use this to keep the slider content contained in a box even when JavaScript is disabled */
            .coda-slider-no-js .coda-slider { height:200px; overflow:auto !important; padding-right:20px }
            /* Change the width of the entire slider (without dynamic arrows) */
            .coda-slider, .coda-slider .panel { width:600px } 
            /* Change margin and width of the slider (with dynamic arrows) */
            .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width:600px }
            .coda-slider-wrapper.arrows .coda-slider { margin:0 10px }
            /* Arrow styling */
            .coda-nav-left a, .coda-nav-right a { background:#000; color:#fff; padding:5px; width:100px }
            /* Tab nav */
            .coda-nav ul li a.current { background:#39c }
            /* Panel padding */
            .coda-slider .panel-wrapper { padding:20px }
            /* Preloader */
            .coda-slider p.loading { padding:20px; text-align:center }
            /* Don't change anything below here unless you know what you're doing */
            /* Tabbed nav */
            .coda-nav ul { clear:both; display:block; margin:auto; overflow:hidden }
            .coda-nav ul li { display:inline }
            .coda-nav ul li a { background:#000; color:#fff; display:block; float:left; margin-right:1px; padding:3px 6px; text-decoration:none }
            /* Miscellaneous */
            .coda-slider-wrapper { clear:both; overflow:auto }
            .coda-slider { float:left; overflow:hidden; position:relative }
            .coda-slider .panel { display:block; float:left }
            .coda-slider .panel-container { position:relative }
            .coda-nav-left, .coda-nav-right { float:left }
            .coda-nav-left a, .coda-nav-right a { display:block; text-align:center; text-decoration:none }
            /* Styling for specific sliders */
            #coda-nav-left-5 { margin:0 1px 0 135px; }
            #coda-nav-left-5, #coda-nav-5, #coda-nav-right-5 { float:left; }
            #coda-nav-5 ul { margin:0; padding:0; list-style:none; }
            #coda-nav-5 a { margin:0; padding:4px; list-style:none;margin-right:1px; }
            #coda-nav-5 li { margin:0; padding:0; list-style:none; }
            #coda-nav-left-5 a, #coda-nav-right-5 a { padding:4px; width:20px; }
            #coda-slider-5 { clear:both; }
        </style>
    </head>
    <body class="coda-slider-no-js">
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：　<a href='http://www.ndoherty.biz/tag/coda-slider/'>Coda-Slider 2.0</a></p>
<!-- CODE -->
<h2>例1：デフォルト（手動再生、自動高さ調整有効）＋初期選択パネル指定</h2>
<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-1">
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 2</h2>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 3</h2>
                <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 4</h2>
                <p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
            </div>
        </div>
    </div><!-- #coda-slider -->
</div><!-- .coda-slider-wrapper -->

<h2>例2：自動再生、自動高さ調整無効</h2>
<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-2">
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 2</h2>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 3</h2>
                <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 4</h2>
                <p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
            </div>
        </div>
    </div><!-- #coda-slider -->
</div><!-- .coda-slider-wrapper -->

<h2>例3：クロスリンク、初期選択パネル指定</h2>
<p>
    1つ目のスライド：<a class="xtrig" href="#1" rel="coda-slider-3">Panel 1</a>| <a class="xtrig" href="#2" rel="coda-slider-3">Panel 2</a>| <a class="xtrig" href="#3" rel="coda-slider-3">Panel 3</a><br>
    2つ目のスライド：<a class="xtrig" href="#1" rel="coda-slider-4">Panel 1</a>| <a class="xtrig" href="#2" rel="coda-slider-4">Panel 2</a>| <a class="xtrig" href="#3" rel="coda-slider-4">Panel 3</a>
</p>
<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-3">
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 1</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 2</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 3</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin.</p>
            </div>
        </div>
    </div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-4">
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 1</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 2</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 3</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin.</p>
            </div>
        </div>
    </div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->

<h2>例4：タブと前後移動ボタンの自動表示を無効化</h2>
<div class="coda-slider-wrapper">
    <div id="coda-nav-left-5" class="coda-nav-left"><a href="#" title="Slide left">&#171;</a></div>
   <div id="coda-nav-5" class="coda-nav">
       <ul>
           <li class="tab1"><a href="#1">Panel 1</a></li>
           <li class="tab2"><a href="#2">Panel 2</a></li>
           <li class="tab3"><a href="#3">Panel 3</a></li>
           <li class="tab4"><a href="#4">Panel 4</a></li>
       </ul>
   </div>
   <div id="coda-nav-right-5" class="coda-nav-right"><a href="#" title="Slide right">&#187;</a></div>
   <div class="coda-slider preload" id="coda-slider-5">
       <div class="panel">
           <div class="panel-wrapper">
               <h2 class="title">Panel 1</h2>
               <p>Lorem ipsum dolor sit amet...</p>
            </div>
       </div>
       <div class="panel">
             <div class="panel-wrapper">
               <h2 class="title">Panel 2</h2>
               <p>Proin nec turpis eget dolor dictum lacinia...</p>
           </div>
       </div>
       <div class="panel">
           <div class="panel-wrapper">
               <h2 class="title">Panel 3</h2>
               <p>Cras luctus fringilla odio vel hendrerit....</p>
           </div>
       </div>
       <div class="panel">
           <div class="panel-wrapper">
               <h2 class="title">Panel 4</h2>
               <p>Nulla ultricies ornare erat...</p>
           </div>
       </div>
   </div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->

<h2>例5：スライドのスピードやイージング効果を調整</h2>
<div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-6">
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 1</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 2</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 3</h2>
                <p>This slider can be controlled by the first set of links above.</p>
                <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin.</p>
            </div>
        </div>
    </div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->

<!-- / CODE -->
        </div>
    </body>
</html>

AnythingSlider
HTMLコンテンツをスライドショー表示

2010/2/21

AnythingSlider

jquery.js、jquery.anythingslider.js、jquery.easing.js

あらゆるHTMLコンテンツをスライド可能なjQueryプラグイン。 滑らかなスクロールを実装するために、jQuery Easing Pluginが併用されています。

スライドは自動再生、前後コンテンツの移動が可能です。 スライドにマウスオーバー中は、自動再生が一時的に停止します。

スライド下部のナビゲーションタブは、jQuery側でスライド数を取得し自動表示されます。 スライド右下にある再生開始と停止処理を行うタブのテキスト部分は、任意のテキストに変更可能です。

各スライドは特定のスライドを直接開けるよう、ハッシュタグが付けられているので、静的なテキストリンクから特定のスライドを開くことも可能です。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.anythingslider.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            function formatText(index, panel) {
              return index + "";
            }
            $(function () {
                $('.anythingSlider').anythingSlider({
                    easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                    autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                    delay: 3000,                    // How long between slide transitions in AutoPlay mode
                    startStopped: false,            // If autoPlay is on, this can force it to start stopped
                    animationTime: 600,             // How long the slide transition takes
                    hashTags: true,                 // Should links change the hashtag in the URL?
                    buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
                    pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
                    startText: "再生",                // Start text
                    stopText: "停止",                // Stop text
                    navigationFormatter: formatText    // Details at the top of the file on this use (advanced use)
                });
                
                $("#slide-jump").click(function(){
                    $('.anythingSlider').anythingSlider(6);
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
                /*
                    anythingSlider v1.0
                    By Chris Coyier: http://css-tricks.com
                    with major improvements by Doug Neiner: http://pixelgraphics.us/
                    based on work by Remy Sharp: http://jqueryfordesigners.com/
                */
                .anythingSlider {
                    width:580px; /* 画像の幅 + 80px */
                    height:287px; /* 画像の高さ + 6px */
                    position:relative;
                    margin:0 auto;
                }
                .anythingSlider .wrapper {
                    width:500px; /* 画像の幅 */
                    height:287px; /* 画像の高さ + 6px */
                    overflow:hidden;
                    margin:0 40px; padding:0;
                    position:absolute;
                    top:0; left:0;
                }
                .anythingSlider .wrapper ul {
                    width:99999px;
                    list-style:none;
                     position:absolute;
                     top:0; left:0;
                     background:#dbca9e;
                     border-top:3px solid #e0a213;
                     border-bottom:3px solid #e0a213;
                     margin:0;  padding:0;
                }
                .anythingSlider ul li {
                    display:block;
                    float:left;
                    list-style:none;
                    width:500px; height:281px; /* 画像サイズ */
                    margin:0; padding:0;
                }
                .anythingSlider .arrow {
                    display:block;
                    height:200px; width:67px;
                    background:url(/content/img/ajax//arrows.png) no-repeat 0 0;
                    text-indent:-9999px;
                    position:absolute;
                    top:40px;
                    cursor:pointer;
                }
                .anythingSlider .forward { background-position:0 0; right:-20px; }
                .anythingSlider .back { background-position:-67px 0; left:-20px; }
                .anythingSlider .forward:hover { background-position:0 -200px; }
                .anythingSlider .back:hover { background-position:-67px -200px; }
                .anythingSlider a { text-decoration:none; }
                #thumbNav { position:relative; top:287px; text-align:center;}
                #thumbNav a {
                    color:black;
                    display:inline-block;
                    margin:0 5px 0 0; padding:2px 8px;
                    height:18px;
                    background:#c58b04 url(/content/img/ajax/cellshade.png) repeat-x;
                    text-align:center;
                    -moz-border-radius-bottomleft:5px;
                    -moz-border-radius-bottomright:5px;
                    -webkit-border-bottom-right-radius:5px;
                    -webkit-border-bottom-left-radius:5px;
                }
                #thumbNav a:hover { background-image:none; }
                #thumbNav a.cur { background:#e0a213; }
                #start-stop { background:green;
                    background-image:url(/content/img/ajax/cellshade.png);
                    background-repeat:repeat-x;
                    color:white;
                    padding:2px 5px;
                    width:40px;
                    text-align:center;
                    position:absolute;
                    right:45px; top:287px;
                    -moz-border-radius-bottomleft:5px;
                    -moz-border-radius-bottomright:5px;
                    -webkit-border-bottom-right-radius:5px;
                    -webkit-border-bottom-left-radius:5px;
                }
                #start-stop.playing { background-color:red; }
                #start-stop:hover { background-image:none; }
                /*
                  Prevents
                */
                #textSlide { padding:20px 30px;}
                #textSlide h3 { font-size:150%; margin:0; padding:0; }
                #textSlide img { float:right; margin:10px 0 10px 10px; }
                #quoteSlide { padding:20px 30px;}
                #quoteSlide blockquote { color:#444; margin:0 0 10px 0; padding:30px; border:1px solid #e0a213; }
                #quoteSlide p { margin:10px 0 0 0; text-align:right; font-size:80%; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：　<a href='http://css-tricks.com/examples/AnythingSlider/'>AnythingSlider</a></p>
<!-- CODE -->
            <div class="anythingSlider">
                <div class="wrapper">
                    <ul>
                        <li><!-- 1 -->
                            <img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" alt="サラダ@オ・タン・ジャディス" />
                        </li>
                        <li><!-- 2 -->
                            <div id="textSlide">
                                <img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_m.jpg" alt="ノルディック＠オ・タン・ジャディス" />
                                <h3>ノルディック＠オ・タン・ジャディス</h3>
                                <p>ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。</p>
                            </div>
                        </li>
                        <li><!-- 3 -->
                            <img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" />
                        </li>
                        <li><!-- 4 -->
                            <img src="http://farm3.static.flickr.com/2527/4193010288_532f1b80db.jpg" alt="ネギトロとアボカドの生春巻@福みみ" width="500" height="281"  />
                        </li>
                        <li><!-- 5 -->
                            <div id="quoteSlide">
                                <blockquote>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、 通信結果に応じてDHTMLで動的にページの一部を書き換えるというアプローチを取る。AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</blockquote>
                                <p> - <a href='http://ja.wikipedia.org/wiki/Ajax'>Ajax</a> From Wikipedia</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

bxSlider
コンテンツスライダー、フェード切替、ティッカー

2010/2/7

bxSlider | jQuery Content Slider

jquery.js、jquery.bxSlider.js

コンテンツのスライダー、フェード切替、ティッカーを簡単に実装できるjQueryプラグイン。

コンテンツの幅、前後移動コントロールのテキストおよび表示の有無、切替時のモード（slide or fade or ticker）、自動スライドの有無、速度、遷移時間など、細かくカスタマイズすることができます。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.bxSlider.js"></script>
        <script type="text/javascript">
            $(function(){
                /* example1 */
                $("#example1").bxSlider({
                    mode:"slide",
                    speed:250,
                    next_text: '次へ',
                    prev_text: '前へ',
                    wrapper_class:"example1_container"
                });
                /* example2 */
                $('#example2').bxSlider({
                    mode: 'slide',
                    auto: 'true',
                    controls: false,
                    speed: 1500,
                    pause: 3500,
                    width: 869,
                    wrapper_class: 'example2_container'
                });
                /* example3 */
                $('#example3').bxSlider({
                    mode: 'fade',
                    speed: 1000,
                    pause: 5000,
                    auto: true,
                    controls: true,
                    auto_direction: 'right',
                    next_text: 'next image',
                    prev_text: 'previous image',
                    width: 240,
                    wrapper_class: 'example3_container'
                });
                /* example4 */
                $('#example4').bxSlider({
                    mode: 'ticker',
                    speed: 7000,
                    width: 500,
                    wrapper_class: 'example4_container'
                });
            });
        </script>
        <style type="text/css">
            div.item {
            }
            div.item img {
                float: left;
                margin-right: 12px;
                width:240px; height:135px;
            }
            div.item h3 {
                width: 330px;
                float: left;
                font-size:1.5em;
                font-weight:bold;
                margin:0; padding:0 0 7px 0;
            }
            div.item p {
                margin:0; padding:0;
                float: left;
                width: 330px;
                color: #666;
            }
            div.wrap {
                margin:0;
                padding:10px;
                border:2px solid #ccc;
                background-color:#fff;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
            }
            div.wrap.one {
                width:600px;
            }    
            div.wrap.two {
                width:869px;
            }
            div.wrap.three {
                width:240px;
            }
            div.wrap.four {
                width:500px;
            }
            /* example1 */
            div.example1_container a.slider_prev,
            div.example1_container a.slider_next {
            }
            /* example2 */
            ul#example2 {
                margin-top: 10px;
                list-style: none;
                font-size: 2em;
                font-family: Arial, sans-serif;
            }
            ul#example2 li {
                list-style: none;
                margin:0; padding:0;
            }
            /* example3 */
            div.example3_container a.slider_prev,
            div.example3_container a.slider_next {
                color: #ccc;
                margin-top: 10px;
            }
            ul#example3 {
                list-style: none;
                margin:0; padding:0;
            }
            ul#example3 li {
                list-style: none;
                margin:0; padding:0;
            }
            /* example4 */
            div.example4_container p {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：　<a href='http://bxslider.com/demos.php'>bxSlider | jQuery Content Slider</a></p>
<!-- CODE -->
            <h2>例1：コンテンツスライダー（手動スライド）</h2>
            <div class="wrap one">
                <div id="example1">
                    <div class="item">
                        <img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_m.jpg" />
                        <h3>ノルディック＠オ・タン・ジャディス</h3>
                        <p>ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。</p>
                    </div><!-- /item -->
                    <div class="item">
                        <img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_m.jpg" />
                        <h3>ノルディック＠オ・タン・ジャディス</h3>
                        <p>ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。</p>
                    </div><!-- /item -->
                    <div class="item">
                        <img src="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d_m.jpg" />
                        <h3>ノルディック＠オ・タン・ジャディス</h3>
                        <p>ガレットは、スモークサーモンとトマトのガレット『ノルディック』をチョイス！スモークサーモンの中には、クリームチーズがたっぷり♪さっぱりとした夏向きのガレットです。</p>
                    </div><!-- /item -->
                    <div class="item">
                        <img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_m.jpg" />
                        <h3>塩バターキャラメルのクレープ @オ・タン・ジャディス</h3>
                        <p>デザートは、「塩バターキャラメルのクレープ 」にしました。クレープの上にキャラメルソースとバターがかかっています。クレープの熱でバターがとろ～りと溶けて、しっとりとした生地とすごく合います。</p>
                    </div><!-- /item -->
                </div><!-- #example1 -->
            </div><!-- /wrap -->
            
            <h2>例2：自動スライド</h2>
            <div class="wrap two">
                <ul id="example2">
                    <li>This list is set to "auto"</li>
                    <li>"speed" is set to 1500</li>
                    <li>"pause" is set to 3500</li>
                    <li>"width" is set to 869</li>
                    <li>You can have unlimited list items</li>
                </ul><!-- #example2 -->
            </div><!-- /wrap -->

            <h2>例3：画像ギャラリーの手動＆自動フェード</h2>
            <div class="wrap three">
                <ul id="example3">
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3664935712/" title="サラダ@オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_m.jpg" width="240" height="135" alt="サラダ@オ・タン・ジャディス" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3664935670/" title="ノルディック＠オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_m.jpg" width="240" height="135" alt="ノルディック＠オ・タン・ジャディス" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3664935456/" title="塩バターキャラメルのクレープ @オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3348/3664935456_0ee9b93009_m.jpg" width="240" height="135" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" /></a></li>
                </ul>
            </div><!-- /wrap -->

            <h2>例4：ティッカー</h2>
            <div class="wrap four">
                <div id="example4">
                    <p>"The greatest thing you ever can do now,</p>
                    <p>Is trade a smile with someone who's blue now,</p>
                    <p>It's very east just..."</p>
                    <p>- Robert Plant</p>
                </div>
            </div><!-- /wrap -->
<!-- / CODE -->
    </body>
</html>

Easy Slider 1.5
画像やコンテンツのスライド

2009/2/23

Easy Slider 1.5

GPL＆MIT
jquery.js、easySlider.js v1.5

簡単に画像や要素のスライドを実装できるjQueryプラグイン。

自動再生の有無や、コントロールの指定（First、Previous、Next、Last）などは、パラメータで簡単にカスタマイズできます。 同一ページ内に複数のスライドを配置する場合は、コントロール部分のIDをユニークに指定する必要があります。

例：画像のスライド（自動再生、画像ボタン）／要素のスライド（手動再生）
Easy Slider 1.5の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>easySlider.js v1.5 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/easySlider1.5.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#slider").easySlider({
                    controlsBefore:'<p id="controls">',
                    controlsAfter:'</p>',
                    auto:true, 
                    continuous:true
                });
                $("#slider2").easySlider({
                    controlsBefore:'<p id="controls2">',
                    controlsAfter:'</p>',
                    prevId:'prevBtn2',
                    nextId:'nextBtn2'
                });    
            });
       </script>
           <!-- CSS -->
        <style type="text/css">
            .demo { margin:0 20px; }
            #slider ul, #slider li, #slider2 ul, #slider2 li { margin:0; padding:0; list-style:none; }
            #slider li, #slider2 li { width:240px; height:180px; }
            #slider2 li { background-color:#333; color:#ddd; }
            #slider2 li p { margin:10px; font-size:.85em; }
            #slider2 li p strong { font-size:1.3em; }
            p#controls, p#controls2 { margin:0; position:relative; }
            #prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; text-indent:-9999px; width:30px; height:77px; position:absolute; left:-30px; top:-130px; }
            #nextBtn { left:240px; }
            #prevBtn a, #nextBtn a { display:block; width:30px; height:77px; background:url("/content/lib/jquery/easyslider/btn_prev.gif") no-repeat 0 0; }
            #nextBtn a { background:url("/content/lib/jquery/easyslider/btn_next.gif") no-repeat 0 0; }
        </style>
    </head>
    <body>
        <h1><a href='http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding'>Easy Slider 1.5</a></h1>
<!-- CODE -->
        <h2>画像のスライド（自動再生、画像ボタン）</h2>
        <div class="demo">
            <div id="slider">
                <ul>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3274514408/"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" alt="アボガドシーザーサラダ" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3273696567/"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="アボガド刺" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3273696401/"><img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_m.jpg" alt="フライドポテト アボカドディップ添え" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3273696469/"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" alt="ベーコンとアボカドのピザ（トマトソース）" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/3273696493/"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" alt="ハニートースト" /></a></li>
                </ul>
            </div>
        </div>
        <h2>要素のスライド（手動再生）</h2>
        <div class="demo">
            <div id="slider2">
                <ul>
                    <li><p><strong>アボガドシーザーサラダ</strong></p><p>よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p></li>
                    <li><p><strong>アボガド刺</strong></p><p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ</p></li>
                    <li><p><strong>フライドポテト アボカドディップ添え</strong></p><p>アボカドディップはとってもクリーミー！ポテトじゃなくてもなんにでも合いそう♪</p></li>
                    <li><p><strong>ベーコンとアボカドのピザ（トマトソース）</strong></p><p>めちゃくちゃおいしかったアボカドのピザ！ピザ生地はクリスピータイプでさくさく！</p></li>
                    <li><p><strong>ハニートースト@アボガドダイニング Platinum Lounge</strong></p><p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！</p></li>
                </ul>
            </div>
        </div>
<!-- / CODE -->
    </body>
</html>

easySlider v1.7

例：画像内でスライド
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>easySlider.js v1.7 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/easySlider1.7.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#slider").easySlider({
                    controlsShow:false,
                    speed:800,
                    auto:true,
                    continuous:true
                });    
            });
       </script>
           <!-- CSS -->
        <style type="text/css">
            .demo { margin:0 20px; background:transparent url(/content/img/ajax/mac.png) no-repeat 0 0; width:128px; height:128px; position:relative; }
            #slider { position:absolute; width:100px; height:61px; top:6px; left:15px; overflow:hidden;}
            #slider ul, #slider li { margin:0; padding:0; list-style:none; width:100px; height:61px; overflow:hidden; }
        </style>
    </head>
    <body>
        <h1>設置サンプル｜Easy Slider 1.7</h1>
        <p>参照：<a href='http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider'>Easy Slider 1.7 - Numeric Navigation jQuery Slider</a></p>
<!-- CODE -->
        <h2>画像内でスライドショー</h2>
        <div class="demo">
            <div id="slider">
                <ul>
                    <li><a href="http://phpjavascriptroom.com/"><img src="/content/img/ajax/ss1.png" alt="PHP & JavaScript Room" /></a></li>
                    <li><a href="http://twitter.com/cocoism"><img src="/content/img/ajax/ss2.png" alt="cocoism (cocoism) on Twitter" /></a></li>
                    <li><a href="http://twilog.org/cocoism"><img src="/content/img/ajax/ss3.png" alt="cocoism(@cocoism) - Twilog" /></a></li>
                    <li><a href="http://www.flickr.com/photos/22559849@N06/"><img src="/content/img/ajax/ss4.png" alt="php_javascript_room, on Flickr" /></a></li>
                    <li><a href="http://cocoismtweets.blogspot.com/"><img src="/content/img/ajax/ss5.png" alt="cocoism's daily tweets" /></a></li>
                </ul>
            </div>
        </div>
<!-- / CODE -->
    </body>
</html>
例：アプリ画面のスライド

アプリ画面は、「PicTweet」。手描きのイラストやメモをTwitterにメッセージ付きで投稿できるiPhoneアプリです。背景の本体画像は「Sketchy Mobile Wireframe Elementsを使用しています。

ERR-content/img/ajax/easyslider3.png
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>easySlider.js v1.7 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/easySlider1.7.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#slider").easySlider({
                    controlsShow:false,
                    speed:1500,
                    auto:true,
                    continuous:true,
                    numeric:true
                });    
            });
        </script>
           <!-- CSS -->
        <style type="text/css">
            .demo {
                margin:10px 20px; padding:0;
                background:transparent url(/content/img/screenshot/iphone.png) no-repeat 0 0;
                width:189px; height:369px;
                position:relative;
            }
            #slider {
                width:160px; height:240px;
                overflow:hidden;
                position:absolute;
                top:62px; left:15px;
                background:red;
            }
            #slider ul,
            #slider li {
                margin:0; padding:0;
                list-style:none;
                width:160px; height:240px;
                overflow:hidden;
            }
            #slider li img {
                width:160px; height:240px;
                overflow:hidden;
            }
            /* numeric controls */
            ol#controls {
                margin:10px 20px; padding:0;
                height:14px;
            }
            ol#controls li {
                margin:0 10px 0 0; padding:0;
                float:left;
                list-style:none;
                font-size:8px;
            }
            ol#controls li a {
                float:left;
                width:14px; height:14px;
                line-height:14px;
                border:1px solid #ccc;
                background:#DAF3F8;
                color:#555;
                padding:0;
                text-align:center;
                text-decoration:none;
            }
            ol#controls li.current a{
                background:#5DC9E1;
                color:#fff;
            }
            ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
        </style>
    </head>
    <body>
        <h1>設置サンプル｜Easy Slider 1.7</h1>
        <p>参照：<a href='http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider'>Easy Slider 1.7 - Numeric Navigation jQuery Slider</a></p>
<!-- CODE -->
        <h2>アプリ画面のスライドショー</h2>
        <p>操作している画面のスクリーンショットをスライドさせてみました。</p>
        <div class="demo">
            <div id="slider">
                <ul>
                    <li><img src="/content/img/screenshot/app1.gif" /></li>
                    <li><img src="/content/img/screenshot/app2.gif" /></li>
                    <li><img src="/content/img/screenshot/app3.gif" /></li>
                    <li><img src="/content/img/screenshot/app4.gif" /></li>
                    <li><img src="/content/img/screenshot/app5.gif" /></li>
                    <li><img src="/content/img/screenshot/app6.gif" /></li>
                    <li><img src="/content/img/screenshot/app7.gif" /></li>
                    <li><img src="/content/img/screenshot/app8.gif" /></li>
                </ul>
            </div>
        </div>
        <ol id="controls"></ol>
<!-- / CODE -->
        <p>※アプリ画面は、「<a href='http://itunes.apple.com/jp/app/picttweet/id316165186?mt=8'>PicTweet</a>」。手描きのイラストやメモをTwitterにメッセージ付きで投稿できるiPhoneアプリです。
        <p>※背景の本体画像は「<a href='http://medialoot.com/item/free-sketchy-mobile-wireframe-elements/'>Sketchy Mobile Wireframe Elements</a>を使用しています。</p>
    </body>
</html>

jQuery pageSlide
ページ全体を左へスライド

2009/3/12

jQuery pageSlide

MIT＆GPL
jquery.js、jquery.pageslide-0.2.js

ページをクリックすると、指定した幅だけページ全体を左にスライドさせ、右側に別ファイルに記述したコンテンツを読込んで表示するjQueryプラグイン。

スライドしたページを元に戻すには、再度、スライドさせたページをクリックします。 デフォルトのスライド幅は300pxです。それ以外の幅に変更する場合はパラメータに指定します。

jQuery pageSlideの使用例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery pageSlide | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.pageslide-0.2.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a.ps').pageSlide({
                    width:"390px"
                });
            });
       </script>
           <!-- CSS -->
        <style type="text/css">
            #pageslide-body-wrap { position:relative; }
            #pageslide-slide-wrap { position:fixed; width:0; top:0; right:0; height:100%; background-color:#000; }
            #pageslide-content h2 { color:#ff6600; margin:10px 0; padding:0; }
            #pageslide-content p { margin:10px 0; padding:0; }
            #wrap { margin:200px auto; width:900px; text-align:center; }
            #secondary { color:#fff; padding:15px 35px; }
            .ps { display:block; width:40%; font-weight:bold; text-decoration:none; border:1px solid #ccc; margin:0 auto; padding:30px; line-height:2; background-color:#fff; }
            .ps:hover { background-color:yellow; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://halobrite.com/blog/jquery-pageslide/'>jQuery pageSlide</a> | 設置サンプル</h1>
<!-- CODE -->
            <a href="/content/demo/_secondary_page.htm" rel="pageslide" class="ps">クリックすると、ページを左に390pxスライドし、<br>右側にコンテンツが表示されます。</a>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery.ImageSwitch
画像を様々な方法でスライドアニメーション切替表示

2009/3/28

jQuery.ImageSwitch

COMMON DEVELOPMENT AND DISTRIBUTION LICENSE (CDDL)
jquery.js、Groject.ImageSwitch.js

jQueryを使用して、様々なスライドアニメーション効果を付けて画像をダイナミックに切替表示するjQueryプラグイン。

Fade In/Out、Fly In、Flip In/Out、Scroll In/Out、Single/Double Doorの9タイプのサンプルが掲載されています。 このタイプをパラメータのTypeに指定し、NewImageにアニメーションを付ける画像を指定します。 その他、EffectOriginalの有無、アニメーション速度（デフォルトは1000）を指定可能です。

設置イメージ設置イメージ
jQuery.ImageSwitchの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery.ImageSwitch | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/Groject.ImageSwitch.js"></script>
        <script type="text/javascript">
            var ImgIdx = 0;
            var pics=[
                "http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg",
                "http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg",
                "http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg",
                "http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg"
            ];
            /* 画像の先読み */
            function PreloadImg(){
                var img = new Image();
                img.src=pics[0];
                img.src=pics[1];
                img.src=pics[2];
                img.src=pics[3];
            }
            $(function(){
                PreloadImg();
                $(".SlashEff ul li").click(function(){
                    $(".Slash").ImageSwitch({
                        Type:$(this).attr("rel"), 
                        NewImage:pics[ImgIdx], 
                        Direction:"DownTop", 
                        EffectOriginal:false
                    });
                    ImgIdx++;
                    if(ImgIdx>3) ImgIdx = 0;
                });
            });
       </script>
           <!-- CSS -->
        <style type="text/css">
            .SplashFrame { width:500px; height:375px; margin:0; padding:0; border:1px solid #000; }
            .SlashEff { width:500px; height:62px; margin:20px 0; padding:0; }
            .SlashEff ul { list-style:none; margin:0; padding:0; overflow:hiddne; }
            .SlashEff ul li { margin:0; padding:0; float:left; list-style-:none; width:25%; cursor:pointer; text-align:center; color:blue; text-decoration:underline; }
            .SlashEff ul li:hover { text-decoration:none; }
        </style>
    </head>
    <body>
        <h1><a href='http://www.hieu.co.uk/ImageSwitch/'>jQuery.ImageSwitch</a> | 設置サンプル</h1>
<!-- CODE -->
        <div class="SplashFrame">
            <img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" alt="イルミネーション@サザンテラス" class="Slash"/>
        </div>        
        <div class="SlashEff cf">
            <ul>
                <li class="TryFadeIn" rel="FadeIn">Fade in</li>
                <li class="TryFlyIn"  rel="FlyIn">Fly in</li>
                <li class="TryFlyOut"  rel="FlyOut">Fly out</li>
                <li class="TryFlipIn"  rel="FlipIn">Flip in</li>
                <li class="TryFlipOut"  rel="FlipOut">Flip out</li>
                <li class="TryScroll"  rel="ScrollIn">Scroll in</li>
                <li class="TryScroll"  rel="ScrollOut">Scroll out</li>
                <li class="TrySingleDoor" rel="SingleDoor">Single Door</li>
                <li class="TryDoubleDoor" rel="DoubleDoor">Double Door</li>
            </ul>
        </div>
<!-- / CODE -->
    </body>
</html>

Simple Toggle with CSS & jQuery
シンプルな要素の表示切替

2009/3/21

Simple Toggle with CSS & jQuery

jquery.js

jQueryを使用して、HTML要素をスムーズにスライドしながら表示・非表示切替する方法が掲載されています。 指定した要素をクリックした時に要素の表示・非表示時のCSSのクラス名を切り替えています。

Simple Toggle with CSS & jQueryの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Simple Toggle with CSS &amp; jQuery | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".toggle_container").hide();
                $("h2.trigger").toggle(function(){
                    $(this).addClass("active"); 
                    }, function () {
                    $(this).removeClass("active");
                });
                
                $("h2.trigger").click(function(){
                    $(this).next(".toggle_container").slideToggle("slow,");
                });
            });
       </script>
           <!-- CSS -->
        <style type="text/css">
            #wrap {
                width:500px;
            }
            h2.trigger {
                float:left;
                width:450px; height:46px;
                margin:0 0 5px 0; padding:0 0 0 50px;
                background:url(/content/img/ajax/simple_toggle/h2_trigger_a.gif) no-repeat;
                line-height:46px;
                font-size:1.5em;
                font-weight:normal;
            }
            h2.trigger a {
                display:block;
                color:#fff;
                text-decoration:none;
            }
            h2.trigger a:hover {
                color:#ccc;
            }
            h2.active {background-position:left bottom;}
            .toggle_container {
                width:500px;
                margin:0 0 5px 0; padding:0;
                border-top:1px solid #d6d6d6;
                background:#f0f0f0 url(/content/img/ajax/simple_toggle/toggle_block_stretch.gif) repeat-y left top;
                overflow:hidden;
                clear:both;
            }
            .toggle_container .block {
                padding:10px 20px 0 20px;
                background:url(/content/img/ajax/simple_toggle/toggle_block_btm.gif) no-repeat left bottom;
            }
            .toggle_container .block p {
                margin:5px 0;padding:5px 0;
            }
            .toggle_container h3 {
                margin:0 0 15px 0; padding:0 0 10px 0;
                border-bottom:1px dashed #ccc;
                font-size:1.2em;
            }
            .toggle_container img {
                float:left;
                margin:0 15px 15px 0; padding:5px;
                border:1px solid #ccc;
                background:#ddd;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/'>Simple Toggle with CSS &amp; jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
            <div class="cf">
                <h2 class="trigger"><a href="#">アボガドダイニング Platinum Lounge@麻布十番</a></h2>
                <div class="toggle_container">
                    <div class="block">
                        <h3>おすすめMENU</h3>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" width="100" height="75" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a>
                            <h4>アボガド シーザーサラダ</h4>
                            <p>よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                        </div>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
                            <h4>アボガド刺</h4>
                            <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ</p>
                        </div>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_t.jpg" width="100" height="75" alt="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge" /></a>
                            <h4>ベーコンとアボカドのピザ（トマトソース）</h4>
                            <p>めちゃくちゃおいしかったアボカドのピザ！ピザ生地はクリスピータイプでさくさく！</p>
                        </div>
                    </div>
                </div><!-- .toggle_container -->

                <h2 class="trigger"><a href="#">高庵TOKYO@新宿三丁目</a></h2>
                <div class="toggle_container">
                    <div class="block">
                        <h3>おすすめMENU</h3>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3105515562/" title="白レバー串みそ焼き@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_t.jpg" width="100" height="75" alt="白レバー串みそ焼き@高庵" /></a>
                            <h4>白レバー串みそ焼き</h4>
                            <p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうｗフォアグラステーキより美味しいかも！？</p>
                        </div>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3104684027/" title="白子の雲丹のせ炙り@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" width="100" height="75" alt="白子の雲丹のせ炙り@高庵" /></a>
                            <h4>白子の雲丹のせ炙り</h4>
                            <p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ！口に入れるとじゅわーっとうまみが広がります。あー幸せ！</p>
                        </div>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3104683957/" title="自家製さつま揚げ二種@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" width="100" height="75" alt="自家製さつま揚げ二種@高庵" /></a>
                            <h4>自家製さつま揚げ二種</h4>
                            <p>黒いのはしいたけじゃありませんｗさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます！</p>
                        </div>
                    </div>
                </div><!-- .toggle_container -->

                <h2 class="trigger"><a href="#">小鳥屋@中目黒</a></h2>
                <div class="toggle_container">
                    <div class="block">
                        <h3>おすすめMENU</h3>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3031535599/" title="レバ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_t.jpg" width="100" height="75" alt="レバ刺@鳥小屋" /></a>
                            <h4>レバ刺</h4>
                            <p>びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！</p>
                        </div>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3031535573/" title="明太子玉子焼き@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_t.jpg" width="100" height="75" alt="明太子玉子焼き@鳥小屋" /></a>
                            <h4>明太子玉子焼き</h4>
                            <p>玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味！玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした！</p>
                        </div>
                        <div class="cf">
                            <a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a>
                            <h4>モツ鍋</h4>
                            <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p>
                        </div>
                    </div>
                </div><!-- .toggle_container -->
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Supersized
自動的に背景画像をブラウザサイズに合わせてリサイズして、スライドショーする

2009/3/8

Supersized - Full Screen Background/Slideshow jQuery Plugin

Firefox、Safari、Opera、IE7、IE6
jquery.js、supersized.1.0.js

自動的に背景画像をブラウザサイズに合わせてリサイズし、スライドショーすることができるjQueryプラグイン。

画像の比率を維持しつつ、ブラウザサイズいっぱいに画像をリサイズします。 余白ができることはなく、スクロールバーが表示されることもありません。

スライドショーの始まりとなるa要素にactiveslideクラスを指定します。 スライドショー開始時の幅・高さ、最小サイズ、スライドの間隔などはパラメータで指定可能です。

Supersizedの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Supersized | 設置サンプル</title>
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/supersized.1.0.js"></script>
        <script type="text/javascript">
            $(function(){
                $.fn.supersized.options = {
                    startwidth: 1024,
                    startheight: 768,
                    minsize: .50,
                    slideshow: 1,
                    slideinterval: 5000
                };
                $('#supersize').supersized(); 
            });
       </script>
           <!-- CSS -->
        <style type="text/css">
            * {
                margin:0; padding:0;
            }
            html {
                /* for IE */
                overflow-x:hidden;
                overflow-y:hidden;
            }
            body {
                overflow:hidden;/* スクロールバーを除去するために必要 */
            }
            img{
                border:none;
            }
            #content{
                position:absolute;
                bottom:5%;
                width:100%; height:60px;
                margin:0px auto;
                background-color:#262626;
                border-top:3px solid #4f4f4f;
                border-bottom:3px solid #4f4f4f;
                line-height:60px;
                text-align:center;
            }
            #content,
            #content a {
                font-weight:bold;
                font-size:13px;
                color:#fff;
            }
            /* Supersize Plugin Styles */
            #supersize img,
            #supersize a {
                width:100%; height:100%;
                display:none;
            }
            #supersize .activeslide,
            #supersize .activeslide img {
                display:inline;
            }
        </style>
    </head>
    <body>
<!-- CODE -->
        <div id="supersize">
            <a class="activeslide" href="http://www.flickr.com/photos/22559849@N06/3142429603/" title="イルミネーション@サザンテラス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3214/3142429603_9f5899513e_o.jpg" alt="イルミネーション@サザンテラス" /></a>
            <a href="http://www.flickr.com/photos/22559849@N06/3142386073/" title="Starbucks Coffee 新宿サザンテラス店  by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3244/3142386073_2997e55c5e_o.jpg" alt="Starbucks Coffee 新宿サザンテラス店 " /></a>
            <a href="http://www.flickr.com/photos/22559849@N06/3143248598/" title="イルミネーション@サザンテラス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3089/3143248598_ef0dfe425e_o.jpg" alt="イルミネーション@サザンテラス" /></a>
        </div>
        <div id="content">
            <a href='http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/'>Supersized - Full Screen Background/Slideshow jQuery Plugin</a> | 設置サンプル
        </div>
<!-- / CODE -->
    </body>
</html>

toggleElements
HTML要素の表示切替

2009/3/21

toggleElements

IE 5.5 + 6 + 7、Firefox 1.5.0.7 + 2.0.0.3、Opera 8.0 + 8.5 + 9.00
GPL
jquery.js、jquery.toggleElements.js

HTML要素の表示・非表示切替を簡単に実装できるjQueryプラグイン。

リスト要素、div要素など指定したHTML要素を簡単に切り替えることができます。 入れ子にしたリスト要素にも表示・非表示切替を適用することができます。 指定した要素のtitle属性の値が切替リンクとして配置されます。

オプションで、切替速度（fxSpeed）、スライドアニメーション速度（fxAnimation）などを指定することができます。 また、要素が表示された時、非表示なった時、クリックされた時にコールバック関数を受け取ることもできます。

オプション値
fxAnimation「slide」、「show」、「fade」のいずれか（デフォルト「slide」）
fxSpeed「slow」、「normal」、「fast」またはミリ秒（デフォルト「normal」= 1000）
classNameこのクラス名を使用。（デフォルト「toggler」。CSSファイルのtoggleElements.css参照。）
removeTitleHTML要素のtitle属性を削除するかの有無。真偽値で指定。（デフォルト「TRUE」
showTitle切替リンクにtitle属性を追加するかの有無。真偽値で指定。（デフォルト（FALSE）
onClickコールバック関数。
この関数は切替リンク上でクリックされた時に呼ばれます。クリックをキャンセルするにはFALSEを帰してください。
onHideコールバック関数。
この関数はコンテンツが非表示なった時に呼ばれます。
onShowコールバック関数。
この関数はコンテンツが表示された時に呼ばれます。
toggleElementsの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>toggleElements | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/toggleelements/jquery.toggleElements.js"></script>
        <script type="text/javascript">
            $(function(){
                $('div#exp1').toggleElements( );
                $('ul#exp2').toggleElements( );
                $('img#exp3').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
                $('ul#exp4').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
                $('div#exp5').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
                $('ul#exp6').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } );
                $('div#exp7').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } );
                $('ul#exp8').toggleElements( { fxAnimation:'show', fxSpeed:'fast', className:'none' } );
                $('fieldset#exp9').toggleElements( { fxAnimation:'show', fxSpeed:1000, className:'toggler', onClick:doOnClick, onHide:doOnHide, onShow:doOnShow } );
                $('div#exp10').toggleElements( );
            });
            function doOnClick() {
                alert('callback: onClick');
            }
            function doOnHide() {
                alert('callback: onHide');
            }
            function doOnShow() {
                alert('callback: onShow');
            }
       </script>
           <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/toggleelements/toggleElements.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/toggleelements/toggleElements2.css" />
        <style type="text/css">
            #wrap { width:578px; }
            #exp1 img,
            #exp5 img,
            #exp10 img { float:left; margin-right:30px; margin-bottom:10px; }
            #exp2,
            #exp4,
            #exp6 { padding:5px 10px 5px 30px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://jquery.andreaseberhard.de/toggleElements/'>toggleElements</a> | 設置サンプル</h1>
<!-- CODE -->

<div id="exp1" title="例1：画像＋テキストがあるdiv要素の表示切替">
    <p class="cf">
        <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
        麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ
    </p>
</div>

<ul id="exp2" title="例2：リスト要素の表示切替">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="アボガド刺" id="exp3" title="例3：異なるクラスのある画像" />

<ul id="exp4" title="例4：異なるクラスのあるリスト要素の表示切替">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<div id="exp5" title="例5：異なるクラスと入れ子のリスト要素の表示切替">
    <p class="cf">
        <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
        麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ
    </p>
    <ul id="exp6" title="例6：リスト要素">
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
    </ul>
    <div id="exp7" title="例7：入れ子のリスト要素">
        <ul>
            <li>項目1</li>
            <li>項目2
                <ul id="exp8" title="例8：リスト要素">
                    <li>項目2-1</li>
                    <li>項目2-2</li>
                    <li>項目2-3</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<fieldset id="exp9" title="例9：コールバック付きのfieldset要素の表示切替">
    <legend>Lorem Ipsum</legend>
    <p><label for="foo"><input id="foo" name="foo" /></label><input type="submit" value="submit" /></p>
</fieldset>

<div id="exp10" class="opened" title="例10：'opened'クラスを追加">
    <p class="cf">
        <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
        麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ
    </p>
</div>

<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop