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

水平型モーションギャラリー/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】

(写真画像をクリックしてリンク先に飛ばす場合#にリンク先のURLを記述します。相対パスか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>