このエントリーをはてなブックマークに追加

水平型モーションギャラリー/Photo Gallery #03

このサンプルは、イメージ画像を水平方向に表示しスクロールさせる事が出来ます。
マウスをイメージ画像上に移動すると横スクロールします。
マウスをギャラリーの中央に移動するとゆっくり移動に！マウスをギャラリーの左右に移動させると高速移動に変化します。
イメージ画像をクリックすると大きく表示させたり、リンクさせたりすることができます。

スポンサーリンク

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / gallery03.css
　　　 |
　　　 +-- js / gallery03.js
　　　 |
　　　 +-- images /1.jpg
　　　 　　　　　　　　　 2.jpg
　　　 　　　　　　　　　 3.jpg
　　　 　　　　　　　　　 4.jpg
　　　 　　　　　　　　　 5.jpg
　　　 　　　　　　　　　 6.jpg
　　　 　　　　　　　　　 7.jpg
　　　 　　　　　　　　　 8.jpg
　　　 　　　　　　　　　 9.jpg
　　　　　　　　　　　　　 ＊.jpg (写真画像)

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

【html】

HTMLファイルの<body></body>の間に下記のコードを入力します。

  • <div id="motioncontainer" style="position:relative;overflow:hidden;">
  • <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
  • <nobr id="trueContainer">
  • <a href="#"><img src="images/1.jpg" border="1" /></a>
  • <a href="#"><img src="images/2.jpg" border="1" /></a>
  • <a href="#"><img src="images/3.jpg" border="1" /></a>
  • <a href="#"><img src="images/4.jpg" border="1" /></a>
  • <a href="#"><img src="images/5.jpg" border="1" /></a>
  • <a href="#"><img src="images/6.jpg" border="1" /></a>
  • <a href="#"><img src="images/7.jpg" border="1" /></a>
  • <a href="#"><img src="images/8.jpg" border="1" /></a>
  • <a href="#"><img src="images/9.jpg" border="1" /></a>
  • </nobr>
  • </div>
  • </div>

【gallery03.css】

（デモでは写真画像500×350pxを使用しています。使用する写真画像のheight(高さ)pxを指定します。

  • #motioncontainer {/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
  • width: 100%; /** Set to gallery width, in px or percentage **/
  • height: 350px; /** Set to gallery height 130px **/
  • }
  • #motioncontainer a img {
  • border: 1px solid #cccccc; /** Set image border color **/
  • }
  • #motioncontainer a:hover img {
  • border: 1px solid navy; /** Set image border hover color **/
  • }
  • #statusdiv {
  • background-color: lightyellow;
  • border: 1px solid gray;
  • padding: 2px;
  • position: absolute; /** Stop Editing Gallery Styles **/
  • left: -300px;
  • isibility: hidden;
  • }
  • #motioncontainer a:hover {
  • color: red; /** Dummy definition to overcome IE bug **/
  • }
  • /** Do not edit IE conditional style below **/
  • /** [if gte IE 5.5] **/
  • #motioncontainer {
  • width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
  • }

【javascript】

「gallery03.js」をエディタで開き以下の場所で変更が出来ます。
1)「中立」の領域の幅、2)スクロール速度、3)最大幅、4)位置、5)最後を示すメッセージ等。

  • 〜　中略　〜
  • //1) Set width of the "neutral" area in the center of the gallery.
  • var restarea=6;
  • //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
  • var maxspeed=10;
  • //3) Set to maximum width for gallery - must be less than the actual length of the image train.
  • var maxwidth=600;
  • //4) Set to 1 for left start, 0 for right, 2 for center.
  • var startpos=2;
  • //5) Set message to show at end of gallery. Enter "" to disable message.
  • var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';
  • 〜　中略　〜

【images】

デモで使用しているサンプル画像です。

【Sample Code】

（写真画像をクリックしてリンク先に飛ばす場合#にリンク先のＵＲＬを記述します。相対パスかhttp://からのフルパスで指定します）

  • <!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">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  • <title>フォト ギャラリー サンプル #03</title>
  • <link href="css/gallery03.css" rel="stylesheet" type="text/css" />
  • <script src="js/gallery03.js" type="text/javascript"></script>
  • </head>
  • <body>
  • <div id="motioncontainer" style="position:relative;overflow:hidden;">
  • <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
  • <nobr id="trueContainer">
  • <a href="#"><img src="images/1.jpg" border="1" /></a>
  • <a href="#"><img src="images/2.jpg" border="1" /></a>
  • <a href="#"><img src="images/3.jpg" border="1" /></a>
  • <a href="#"><img src="images/4.jpg" border="1" /></a>
  • <a href="#"><img src="images/5.jpg" border="1" /></a>
  • <a href="#"><img src="images/6.jpg" border="1" /></a>
  • <a href="#"><img src="images/7.jpg" border="1" /></a>
  • <a href="#"><img src="images/8.jpg" border="1" /></a>
  • <a href="#"><img src="images/9.jpg" border="1" /></a>
  • </nobr>
  • </div>
  • </div>
  • </body>
  • </html>

画像をクリックしたときに別ウインドウにて拡大表示させる場合！
・big1.jpg…大きい画像を用意し指定します。
・500, 330ウインドウの大きさを指定します。

  • <!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">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  • <title>フォト ギャラリー サンプル #03 large</title>
  • <link href="css/gallery03.css" rel="stylesheet" type="text/css" />
  • <script src="js/gallery03.js" type="text/javascript"></script>
  • </head>
  • <body>
  • <div id="motioncontainer" style="position:relative;overflow:hidden;">
  • <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
  • <nobr id="trueContainer">
  • <a href="javascript:enlargeimage('images/big1.jpg', 500, 330)"><img src="images/1.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big2.jpg', 500, 330)"><img src="images/2.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big3.jpg', 500, 330)"><img src="images/3.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big4.jpg', 500, 330)"><img src="images/4.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big5.jpg', 500, 330)"><img src="images/5.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big6.jpg', 500, 330)"><img src="images/6.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big7.jpg', 500, 330)"><img src="images/7.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big8.jpg', 500, 330)"><img src="images/8.jpg" border="1" /></a>
  • <a href="javascript:enlargeimage('images/big9.jpg', 500, 330)"><img src="images/9.jpg" border="1" /></a>
  • </nobr>
  • </div>
  • </div>
  • </body>
  • </html>

* CMotion Image Gallery- ｩ Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* www.dynamicdrive.com forums showthread.php?t=11839 by jschuer1 8/5/06

Copyright(C)2009 My Island All Rights Reserved.