olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. スライドショー>
  4. トップページにピッタリなスライドショー

スライドショーmootools.js

トップページにピッタリなスライドショー

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<?xml version="1.0" encoding="utf-8"?><!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="en-gb" lang="en-gb" dir="ltr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>
<script type="text/javascript" src="files/mootools.js"></script>
<script type="text/javascript" src="files/tpniceslideshow.js"></script>
<link rel="stylesheet" type="text/css" href="files/tpniceslideshow.css" title="default" />
<style type="text/css">

.TPNSSwrapper {
				width: 626px;  /*定义slideshow的总宽度*/
			}

			#TPNiceSlideShowMenu div img {
				float: left;
				margin:  8px;

			}
			
			/*右边滚动菜单*/
			#TPNiceSlideShowMenu div {
				height: 60px;
				width: 246px;
			}
			
			
			/*菜单项目*/
			.TPNiceSlideShowMenuContent {
			text-align: left;
			}
			
			/*SlideShow内容区域*/
			#TPNiceSlideShow {
				height: 300px;
				width: 356px;
				float: left;
			}
			
			/*右边滚动内容区域*/
			#TPNiceSlideShowMenuWrp {
				height: 300px;
				width: 246px;
				overflow:hidden;
			}
			
			/*滚动条*/
			.tpniceslideshow_scrollbar-vert{
				height: 300px;
				width: 22px;
				float:right;
			}
			
			/*滚动条按钮*/
			.tpniceslideshow_handle-vert{
				width: 22px;
			}
			
			/*内定描述*/
			.TPNiceSlideShowGallery .slideInfoZone {
				height: 300px;
				width: 200px;
				background: #333333;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-top: -150px;
     			margin-left: -100px;
					
			}
			.TPNiceSlideShowMenuContent img{
			    width:50px;
				height:37px;
		    }
</style>
<script type="text/javascript">
			/* <![CDATA[ */
			function startTPNiceSlideShow() {
				var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
						timed: true,  //自動スライドショー
					showInfopane: true, //左の画像の上にインフォを表示する
					showMenu: true,  //右のリストを表示する
					embedLinks: true, //嵌入链接
					fadeDuration: 500, //フェードアニメの速さ
					readMore: false, // 「続き」ボタンを表示するか否か
					readMoreText: 'Read More', //「続き」ボタンのテキスト
					showTitle: true, //タイトルを表示するか
					titleLink: true, //タイトルにリンクつけるか
					showDescription: true, //説明を表示するか
			
					scrollBar: true, //スクロールバーを表示するか
					itemCount: 7,  //項目数
					scrollBarContent:	$('TPNiceSlideShowMenuWrp'), 
					scrollBarArea: $('tpniceslideshow_scrollbar'), 
					scrollBarHandle: $('tpniceslideshow_handle'),  
			
					delay: 5000 //スライド切り替えの早さ
				});
			}
			window.onDomReady(startTPNiceSlideShow);
			
			/* ]]> */
</script>
</head>
<body>
<div class="TPNSSwrapper">
        <div id="TPNiceSlideShow">
        <!--repeat start img-->
              <div class="imageElement">
                <h3>TITLE1</h3>
                <p>comment1</p>
                <a href="#" title="open link" class="open"></a>
                <img src="files/11193000.jpg" class="full" alt="The Celebrities" /></div>
           <!--repeat end img-->
           
            <!--repeat start img-->
              <div class="imageElement">
                <h3>TITLE2</h3>
                <p>comment2</p>
                <a href="#" title="open link" class="open"></a>
                <img src="files/17018000.jpg" class="full" alt="Eaque ipsa quae " />
            </div>
        <!--repeat end img--> 
        
        <!--repeat start img-->   
            <div class="imageElement">
                <h3>TITLE3</h3>
                <p>comment3</p>
                <a href="#" title="open link" class="open"></a>
                <img src="files/12629000.jpg" class="full" alt="The Celebrities" />
            </div>
            <div class="imageElement">
                <h3>TITLE4</h3>
                <p>comment4</p>
                <a href="#" title="open link" class="open"></a>
                <img src="files/23785000.jpg" class="full" alt="Bolt - Box Office" />
            </div>
          <!--repeat end img-->
          
          <!--repeat start img-->
            <div class="imageElement">
                <h3>TITLE5</h3>
                <p>comment5</p>
                <a href="#" title="open link" class="open"></a>
                <img src="files/37400000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
            </div>
            <!--repeat end img-->
            
            <!--repeat start img-->
            <div class="imageElement">
                <h3>TITLE6</h3>
                <p>comment6</p>
                <a href="#" title="open link" class="open"></a>
                <img src="files/69460000.jpg" class="full" alt="From Oprah to Springsteen" />
            </div>
            <!--repeat end img-->
            
            <!--repeat start img-->
            <div class="imageElement">
                <h3>TITLE7</h3>
                <p>comment7</p>
                <a href="#" title="open link" class="open"></a>
                <a href="#" title="open link" class="open"></a>
                <img src="files/22176000.jpg" class="full" alt="Eaque ipsa quae " />
            </div>
            <!--repeat end img-->
            
            
        
        </div>
        
        
        
        <div id="TPNiceSlideShowMenuWrp">
            <div id="TPNiceSlideShowMenu">
            
                <!--repeat start list-->
                <div class="TPNiceSlideShowMenuContent">
                    <img src="files/11193000.jpg" alt="The Celebrities" />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE1</span><br />
                            <span class="tpnssmenu_desc">comment1</span> </a>
                    </p>
                </div>
                <!--repeat end list-->
                
                <!--repeat start list-->
				<div class="TPNiceSlideShowMenuContent">
                    <img src="files/17018000.jpg" alt="The Celebrities" />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE2</span><br />
                            <span class="tpnssmenu_desc">comment2</span> </a>
                    </p>
                </div>
                <!--repeat end list-->
                
                <!--repeat start list-->
                <div class="TPNiceSlideShowMenuContent">
                    <img src="files/12629000.jpg" alt="Bolt - New Box Office" />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE3</span><br />
                            <span class="tpnssmenu_desc">comment3</span>
                        </a>
                    </p>
                </div>
                <!--repeat end list-->
                
                
                
                <!--repeat start list-->
                <div class="TPNiceSlideShowMenuContent">
                    <img src="files/23785000.jpg" alt="2009 Grammy Nominat .." />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE4</span><br />
                            <span class="tpnssmenu_desc">comment4</span> </a>
                    </p>
                </div>
                <!--repeat end list-->
                
                <!--repeat start list-->
                <div class="TPNiceSlideShowMenuContent">
                    <img src="files/37400000.jpg" alt="From Oprah to Springs ..." />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE5</span><br />
                            <span class="tpnssmenu_desc">comment5</span></a>
                    </p>
                </div>
                <!--repeat end list-->
                
                <!--repeat start list-->
                <div class="TPNiceSlideShowMenuContent">
                    <img src="files/69460000.jpg" alt="Eaque ipsa quae " />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE6</span>
                            <br />
                            <span class="tpnssmenu_desc">comment6</span></a>
                    </p>
                </div>
                <!--repeat end list-->
                
                
                
                <!--repeat start list-->
                <div class="TPNiceSlideShowMenuContent">
                    <img src="files/22176000.jpg" alt="Red Carpet" />
                    <p>
                        <a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE7</span><br />
                            <span class="tpnssmenu_desc">comment7</span> </a>
                    </p>
                </div>
                <!--repeat end list-->
                
               
                
            </div>
        </div>
        <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
            <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert"></div>
        </div>
        <div style="clear: both;">
  </div>
</body>
</html>

よくFlashであるようなトップページのお知らせコンテンツ。
それをAjaxで再現したようなスライドショースクリプトです。 
左の画像と右側のリストは連動していて、基本的に自動スライドしますが、マウスオンしたら止まったり、
リストで選択すると、それが左の画像に現れたりと、しっかりとしたコンテンツを作成できます。
サンプルでは左に画像しか表示していませんが、この画像の上にそれぞれのタイトルや説明、リンクなども設置できます。
mootools.jsを使用しています。 

１．ダウンロード/セッティング

サイトへ行き TPNice Slideshow.zip をダウンロードしてください。
それを解凍したら、 filesフォルダをアップします。
js , css , gif などのファイルがまとめて入っているので、それぞれを既に使っているフォルダへ整理してしまっても良いかもしれません。
ただ設置時に混乱すると手間がかかる為、最初はfilesフォルダに入れておいて設置が成功してから移動した方が迷わないと思います。

２．<head>設定

アップしたスクリプト、CSSを読み込ませます。

<script type="text/javascript" src="files/mootools.js"></script>
<script type="text/javascript" src="files/tpniceslideshow.js"></script>
<link rel="stylesheet" type="text/css" href="files/tpniceslideshow.css" title="default" />

次にCSSも直接記述しますが、この内容は tpniceslideshow.css 内に入れてしまっても良いかもしれません。
CSSの記述内容はサンプルの「CODE」を開いて確認してください。

最後にスライドショーの設定を記述します。 

<script type="text/javascript"

/* <![CDATA[ */

function startTPNiceSlideShow() {
var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
timed: true,  //自動スライドショー
showInfopane: true, //左の画像の上にインフォを表示する
showMenu: true,  //右のリストを表示する
embedLinks: true, //
fadeDuration: 500, //フェードアニメの速さ
readMore: false, // 「続き」ボタンを表示するか否か
readMoreText: 'Read More', //「続き」ボタンのテキスト
showTitle: true, //タイトルを表示するか
titleLink: true, //タイトルにリンクつけるか
showDescription: true, //説明を表示するか
scrollBar: true, //スクロールバーを表示するか
itemCount: 7,  //項目数
scrollBarContent: $('TPNiceSlideShowMenuWrp'), 
scrollBarArea: $('tpniceslideshow_scrollbar'), 
scrollBarHandle: $('tpniceslideshow_handle'),  
delay: 5000 //スライド切り替えの早さ
});
}
window.onDomReady(startTPNiceSlideShow);
/* ]]> */

</script>

細かい説明はコメント見てください。

３．HTMLマークアップ

<div class="TPNSSwrapper">
        <div id="TPNiceSlideShow">
              <!--repeat start img　ここからendまでを左の画像の一つの単位と考える-->
                  <div class="imageElement">
                      <h3>TITLE1</h3> <!--タイトル-->
                      <p>comment1</p><!--説明文-->
                      <a href="#" title="open link" class="open"></a><!--ここで設定したリンクが全体のリンク先になる-->                       <img src="files/11193000.jpg" class="full" alt="The Celebrities" /><!--表示される画像-->
                  </div>
             <!--repeat end img-->
        </div>
       <div id="TPNiceSlideShowMenuWrp">
            <div id="TPNiceSlideShowMenu">
               <!--repeat start list　ここからendまでを右のリストの一つの単位と考える-->
                    <div class="TPNiceSlideShowMenuContent">
                        <img src="files/11193000.jpg" alt="The Celebrities" /><!--サムネイル画像-->
                        <p><a href="javascript:void(0);"><span class="tpnssmenu_title">TITLE1</span><!--タイトル--><br />
                              <span class="tpnssmenu_desc">comment1</span><!--説明文--> </a>
                        </p>
                    </div>
              <!--repeat end list-->
          </div>
      </div>
      <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert"><!--ここから-->
            <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert"></div>
      </div><!--ここまででスクロールバー-->
     <div style="clear: both;">
</div>

細かい説明はコメントタグを見てください。
内容を増やす場合は、<!--repert～-->で囲まれた範囲を増やしていけばOKです。
アイテム数が変更したなら、<head>で設定したアイテム数の部分も変更しておきましょう。 

関連スクリプト

感想

これは楽かも。単純なスライドだけならFlashと見比べても遜色ないし。
Flashでこういうことやろうとすると、吐き出すデータをXMLやJSONやらで作って読み込ませたりしなきゃいけないけど、
スクリプトで処理すれば、ただHTML書き出すだけでOKですし。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。