Captions with a slideshow

Question

I've created a slideshow with a crossfade transition and I would like to have the captions centered inside the 3 column table above the images. I've tried a few scripts without luck, somehow the positioning inside the table gets messed up.

I want to place the captions in the 2nd column in the table above the slideshow:

http://munzerhodayfa.com/blaise.html

score 0 · Answer 1 · answered Aug 22 '12 at 14:08

First thing is that you shouldn't use a table for layout.

Here is your layout:

<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>

Change the above to:

<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>

Here is the CSS for above:

.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;
}

For Javascript you have to get the caption from somewhere. I would place the caption in the "alt" attribute of the image and use javascript to take that when the picture loads and place it into the caption div (see the proposed HTML above).

$(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);
});

Captions with a slideshow

1 Answers1