Für den nächsten, der die selbe Frage stellt (da ich grade am gleichen Thema bin - ich hasse vielversprechende und dann nicht zufriedenstellend beantwortete Forumsbeiträge :
mooCaption.js im <head> einbinden: (Download siehe erster Beitrag)
Eigner JS-Code:
Code:
window.addEvent('domready', function(){
var caption = new mooCaption({
position: 'bottom',
mode: 'slide',
speedOver: 500,
speedOut: 500,
slideFrom: 'normal',
transition: 'Quad.easeIn'
});
caption.captionize();
});
Css dazu:
Code:
img.capt{
float: left;
border: 1px solid #000;
margin: 4px;
}
div.caption{
margin: 0px;
z-index: 1;
border-top: 1px solid #000;
background: #fff;
color: #000080;
height: 40px;
width: 100%;
position: relative; /* Caption MUST have both float left and position relative*/
float: left; /* To work in both, IE and FF */
opacity: 0.7;
}
Jedes Bild, das eine Caption mit Effekt bekommen soll, muss einen 'alt'-Text haben (der wird als Captiontext verwendet) und die Klasse .capt :
zB
Code:
<img class="capt" src="tl_files/inhalte/image.jpg" alt="Here goes your caption text" />
Das wars auch schon.
Lesezeichen