PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照：　bxSlider | jQuery Content Slider

例1：コンテンツスライダー（手動スライド）

ノルディック＠オ・タン・ジャディス

ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。

ノルディック＠オ・タン・ジャディス

ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。

ノルディック＠オ・タン・ジャディス

ガレットは、スモークサーモンとトマトのガレット『ノルディック』をチョイス！スモークサーモンの中には、クリームチーズがたっぷり♪さっぱりとした夏向きのガレットです。

塩バターキャラメルのクレープ @オ・タン・ジャディス

デザートは、「塩バターキャラメルのクレープ 」にしました。クレープの上にキャラメルソースとバターがかかっています。クレープの熱でバターがとろ～りと溶けて、しっとりとした生地とすごく合います。

例2：自動スライド

例3：画像ギャラリーの手動＆自動フェード

例4：ティッカー

"The greatest thing you ever can do now,

Is trade a smile with someone who's blue now,

It's very east just..."

- Robert Plant

設置サンプルのソース

<!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>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <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>