jquery - スライドショー付きキャプション

Question

クロスフェード トランジションを含むスライドショーを作成しました。画像の上の 3 列のテーブルの中央にキャプションを配置したいと考えています。うまくいかないスクリプトをいくつか試してみましたが、どういうわけか、テーブル内の位置がめちゃくちゃになってしまいました。

スライドショーの上の表の 2 列目にキャプションを配置したい:

http://munzerhodayfa.com/blaise.html

Answer 1

まず、レイアウトにテーブルを使用しないでください。

レイアウトは次のとおりです。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="25%"><a href="contact.html">BLAISE REUTERSWARD</a></td>
      <td width="50%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>
<div class="fadein">
   <!-- All your images in here -->
</div>

上記を次のように変更します。

<div id="header clearfix">
  <div id="contact">
    <a href="contact.html">BLAISE REUTERSWARD</a>
  </div>
  <div id="caption">
    <!-- Caption Text Here -->
  </div>
</div>
<div class="fadein">
   <!-- All your images in here -->
    <img src="images/BR_12.jpg" alt="This will be your caption area for javascript to read">
</div>

上記のCSSは次のとおりです。

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

#contact {
    width: 25%;
    float: left;
}

#caption {
    width: 50%;
    float: left;
}

.fadein {
    clear:both;
}

Javascript の場合、どこかからキャプションを取得する必要があります。キャプションを画像の「alt」属性に配置し、javascript を使用して、画像がロードされたときにキャプション div に配置します (上記の提案された HTML を参照)。

$(function() {

    $(".fadein :first-child").appendTo(".fadein");

    setInterval(function() {

         $(".fadein :first-child").hide().appendTo(".fadein").fadeIn(2000, function () {
                 var caption = $(this).attr('alt');
                 $('#caption').text(caption);
             });

    }, 6000);
});