« HTML5 で lightbox2を使う | Main | PhotoshopCCでfaviconを作り、htmlに書き込み表示させる »

02/16/2015

HTML5 で ほんわか切替 キャプション付きスライドショウ

HTML5で使うスライドショウ、写真をほんわかと切り替えてゆきたい。
写真のキャプション無しのものは、参考事例があったが、キャプション付きの場合はどうすれば良いか、いろいろ調べて、やってみて、やっとやり方が分かったので、ここにメモ書きとして記載しておく。
ここでは、Jon Raasch さんが発表している方法を活用させて戴いた。詳細はそのブログを見て欲しい。
このやり方は、スライドショウで使う写真の大きさを先ず決める。サイズが大きいオリジナルに近いまま使えると良いが、その写真はサーバーにアップロードしなければならないし、写真を入れ替えたりする際に、アップロードに時間がかかるのも都合が悪い。しかも、ここで使うスライドショウの方法では、写真のサイズは、ホームページで実際に扱うサイズに加工しておく必要がある。 大きなサイズの写真を格納しておいて、使用時に縮小しようとしたが、上手く動かせなかった。
私の場合には、640px x 350px というサイズにした。写真のオリジナルサイズは、かなり大きいので、Photoshopを使って写真の大きさをリサイズした。その方法も、ここに記載しておく。

《写真のリサイズ方法》
Photoshopを起動し、
①ファイル→開く からリサイズしたいオリジナル画像を選択する。
②「切り抜きツール」ボタンをクリックし、
③ツールバーに表示された、横枠と縦枠の各データ入力欄に切り抜きたい大きさの数値を入れる。  例)横枠の値:640、 縦枠の値:350、  データの精細さは 72dpiにしておく。
④画面上に切り抜き枠が表示されたら、切り抜き枠の中で画像を動かして、場所を決める。
⑤ダブルクリックすると切り抜き範囲が確定する。
⑥ファイルは、別名で保存すること。保存を押してしまうと、オリジナルファイルが縮小版に置き換わってしまうので、十分注意すること。

《HTMLの書き方》
<head>~</head>部分には、次のように jquery と css を書いておく。
① jquery
 【注意】画面の表示時間は、5000ms、切替時間は、2000ms で記載している。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <title>枠無しのキャプション・スライドショウ </title>
    <script>
    function slideSwitch() {
    var $active = $('#slideshow p.active');
    if ( $active.length == 0 ) $active = $('#slideshow p:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow p:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
            $active.removeClass('active last-active');
        });
    }
    $(function() {
    setInterval( "slideSwitch()", 5000 );
    });
    </script>

② css
 【注意】 表示させる画面サイズは、640x350 ピクセル。キャプション文字を書く位置は、absoluteになっているので、そこの高さ方向の値は、+25px して 375px とした。
また、僕は12カラム構成の画面を使って、その中で6カラムをこの画像のスライドショウ表示用に使うので、表示用の幅は、100%とした。

    <style type="text/css">
    #slideshow {
    position:relative;
    width: 640px;
    height:350px;
    }
    #slideshow p {
    position: absolute;
    top:  0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
    background-color: white;
    margin: 0px;
    height: 375px;
    }
    #slideshow p.active {
    z-index: 10;
    opacity: 1.0;
    }
    #slideshow p.last-active {
    z-index: 9;
    }
    #slideshow p img {
    width: 100%;
    height: 350px;
    display: block;
    }
    </style>

③<body></body> には、次のように書く。
ここでのサンプルは、4枚の写真で記載したが、写真枚数が多くなれば、記載は継ぎ足してゆくだけである。
 【注意】ここで、私が使う写真画像は、別の階層のimgフォルダに入って居るので、「../img/」というディレクトリ指示が入って居る。
 画像の拡張子は、「.jpg」 でもよかったが 「.png」としている。
 「
Picture No.X」 が、各画像のキャプション・データになっている。


    <div id="slideshow">
        <p class="active">
           <a href=""><img src="../img/picture1.png" alt="" class="active"></a>
            Picture No.1
        </p>
        <p><a href=""><img src="../img/picture2.png" alt=""></a>
           Picture No.2
        </p>
        <p><a href=""><img src="../img/picture3.png" alt=""></a>
           Picture No.3
        </p>
        <p><a href=""><img src="../img/picture4.png" alt=""></a>
           Picture No.4
        </p>
    </div>


これだけの記載で、スライドショウが動くはずだ。もし最初の絵が表示されるのに、スライドショウが動かないのなら、それは「
jquery」のバージョンが違って指定してしまっていたり、絵が出ないのなら、絵を置いてあるアドレスの指定が間違えているのかもしれない。

« HTML5 で lightbox2を使う | Main | PhotoshopCCでfaviconを作り、htmlに書き込み表示させる »

PC and PC troubles」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/540128/61149875

Listed below are links to weblogs that reference HTML5 で ほんわか切替 キャプション付きスライドショウ:

« HTML5 で lightbox2を使う | Main | PhotoshopCCでfaviconを作り、htmlに書き込み表示させる »

December 2017
Sun Mon Tue Wed Thu Fri Sat
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Recent Trackbacks

無料ブログはココログ