コンテンツを拡大縮小してスライド/コンテンツ表示/SolidStateEveryday

スライドボックスjquery-1.3.1.min.js

SAMPLE
CODE
DownLoad

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
	
	<title>Moving Boxes</title>
	
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
	<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
</head>


<body>
    <div id="wrapper">
	    
        <div id="slider">    

            <img class="scrollButtons left" src="images/leftarrow.png">

			<div style="overflow: hidden;" class="scroll">
	
				<div class="scrollContainer">
	
	                <div class="panel" id="panel_1">
						<div class="inside">
							<img src="images/1.jpg" alt="picture" />
							<h2>News Heading</h2>
							<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more link</a></p>
						</div>
					</div>

	                <div class="panel" id="panel_2">
						<div class="inside">
							<img src="images/2.jpg" alt="picture" />
							<h2>News Heading</h2>
							<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more link</a></p>
						</div>
					</div>
				
	                <div class="panel" id="panel_3">
						<div class="inside">
							<img src="images/3.jpg" alt="picture" />
							<h2>News Heading</h2>
							<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more link</a></p>
						</div>
					</div>
					
					<div class="panel" id="panel_4">
						<div class="inside">
							<img src="images/4.jpg" alt="picture" />
							<h2>News Heading</h2>
							<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more link</a></p>
						</div>
					</div>
				
                </div>

				<div id="left-shadow"></div>
				<div id="right-shadow"></div>

            </div>

			<img class="scrollButtons right" src="images/rightarrow.png">

        </div>
        
    </div>

</body>

</html>

	Moving Boxes

ボックス内のコンテンツをパネル分けして、拡大・縮小しながらスライドするコンテンツボックスです。
jQueryを使用し、デザイン要素はCSSで設定します。
結構かんたんに設置できるので、中ぐらいのコンテンツで調子を変えたい場合などに利用してみてはいかがでしょうか。

セッティング

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

サイトへ行き、MovingBoxes.zip をダウンロードしてください。
その中に全て必要なものが入っていますが、jQueryだけは少し古いので、
最新版を希望する場合は、jquery-1.3.1.min.js を jquery-1.3.2.min.js に置き換えてください。
解凍したら、css , images , js フォルダをアップロード。
designフォルダには、枠のPSDファイルが入っているので、デザインを変更したい場合はこれを参考にします。

２．<head>設定

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

３．HTMLマークアップ

まず大枠を記述します。

IDを忘れずに付けてください。次に左の矢印をつけます。

そして中枠（？）的なボックスを記述します。

この中枠の中に、パネルボックスを記述していきます。

パネルを増やしていきたい場合は、panel_1の数字をカウントアップさせてIDを付けていけばOKです。

<div id="slider">
<img class="scrollButtons left" src="images/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
    <div class="panel" id="panel_1">
        <div class="inside">
            <img src="images/1.jpg" alt="picture" />
            <h2>News Heading</h2>
               <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more link</a></p>
        </div>
    </div>

    <div class="panel" id="panel_2">         <div class="inside">
            <img src="images/2.jpg" alt="picture" />
            <h2>News Heading</h2>
               <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more link</a></p>
        </div>
    </div>

</div>
</div>