Bildunterschrift bei Mouseover einblenden und jQuery cycle für “csc-textpic”

Die Anforderung: Bilder sollen bei Mouseover den jeweiligen Text anzeigen, der als Bildunterschrift in einen TYPO3 Datensatz gepflegt wird. Per CSS wird der Text über das Bild gelegt. Verlässt die Maus das Bild, soll der Text natürlich wieder verschwinden.

Um das Ganze noch zu toppen, sollen die Bilder per Überblendungseffekt in einer Art Diashow ablaufen. Jedesmal, wenn man mit der Maus über ein Bild geht, soll der dazugehörige Text eingeblendet werden und das Bild stehen bleiben.

Zunächst legt man einen Datensatz vom Typ Bilder an, lädt ein paar Bilder hoch und befüllt das Feld für die Bildunterschriften. Die Anzahl an Spalten wird auf 1 gestellt, Position der Bilder ist oben mittig. TYPO3 generiert dann das folgende HTML:

<div id="c..." class="csc-default" >
  <div class="csc-textpic csc-textpic-center csc-textpic-above">
    <div class="csc-textpic-imagewrap" style="width:...">
      <div class="csc-textpic-imagerow" style="width:...">
        <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:...">
          <dt>
            <img src="..." width="..." height="..." alt="" />
          </dt>
          <dd class="csc-textpic-caption">
            Bildunterschrift
          </dd>
        </dl>
      </div>
      <div class="csc-textpic-imagerow" style="width:...">
        <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:...">
          <dt>
            <img src="..." width="..." height="..." alt="" />
          </dt>
          <dd class="csc-textpic-caption">
            Bildunterschrift
          </dd>
        </dl>
      </div>
      ...
    </div>
  </div>
</div>

Verwendet man das jQuery Cycle Plugin für das Ein- und Ausfaden der Bilder so ist der Code der folgende:

$(document).ready(function(){
  $('.csc-textpic-imagewrap').cycle();
})

Im div der Klasse “csc-textpic-imagewrap” befinden sich die divs, die animiert werden sollen. So weit, so gut.
Als nächstes sollen die Bildüberschriften bei Mouseover über das Bild eingeblendet werden. Zunächst versteckt man die Bildunterschriften per CSS:

.csc-textpic-caption{
  display:none;
}

Damit zu jedem Bild der richtige Text eingeblendet wird, ist eine Schleife nötig. Folgender jQuery Code machts möglich:

$('.csc-textpic').each(
  function(int){
    $(this).hover(
      function () {
        $(this).find('.csc-textpic-caption').stop(true, true).fadeIn('fast');
      }, 
      function () {
        $(this).find('.csc-textpic-caption').stop(true, true).hide();
      }
    );
  }
 
);

Das "stop(true, true)" bewirkt, dass die Animation gestoppt wird, bevor die nächste beginnt. Das verhindert ein unkontrolliertes Flackern, wenn jemand mit der Maus ständig hin und her fährt.

Wenn sich der Kunde dann überlegt, dass die Texte doch lieber von selbst und nicht per Mouseover eingeblendet werden sollen, nehmen wir dieses:

$'.csc-textpic-imagewrap').cycle({ 
  after: showcaption,
  before: hidecaption
});

Das Cycle Plugin erlaubt das Einbinden von Funktionen am Anfang und am Ende der Überblendung. Die beiden Funktionen showcaption() und hidecaption() werden z.B. so definiert:

function showcaption() { 
  $('.csc-textpic-caption').delay(1000).fadeIn('slow');
}
function hidecaption() { 
  $('.csc-textpic-caption').hide();
}