<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>moo.rd - Fx.Cycles</title>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#myElement {
width:432px;
height:332px;
overflow:hidden;
}
div#myElement img {
background-color:#EEEEEE;
border:1px solid #999999;
display:block;
height:300px;
margin:auto;
padding:15px;
width:400px;
}
div#thumbs img {
border:2px solid #999999;
margin-right:10px;
float:left;
}
div#thumbs img.active {
border:2px solid #FF6600;
margin-right:10px;
float:left;
}
</style>
<script src="moo.rd_1.3.1_mootools_1.2.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var imgs = $$('#thumbs img');
var fx = new Fx.Cycles.fadeZoom('myElement', {
autostart: true,
duration:2000,
steps: 6000,
onAnimeIn: function(curr, next) {
imgs.each(function(img, i) {
if(i != this.count) img.removeClass('active');
else img.addClass('active');
}, this);
}
});
['1', '2', '3', '4'].each(function(el, i) {
$('img'+el).addEvent('click', function() {
if(fx.autostart) {
fx.autostart = $clear(fx.autostart);
fx.autostart = fx.next.periodical(fx.options.steps, fx);
}
fx.goTo(i);
});
});
});
</script>
</head>
<body>
<div style="width:600px; margin:auto;">
<h2><a style="color:#0099FF;" href="http://www.moord.it/">moo.rd</a> Fx.Cycles Demo - by RD</h2>
<div id="myElement">
<img src="img/1.jpg" alt="1" />
<img src="img/2.jpg" alt="2" />
<img src="img/3.jpg" alt="3" />
<img src="img/4.jpg" alt="4" />
</div>
<div id="thumbs">
<img id="img1" class="active" src="img/1_little.jpg" alt="1" />
<img id="img2" src="img/2_little.jpg" alt="2" />
<img id="img3" src="img/3_little.jpg" alt="3" />
<img id="img4" src="img/4_little.jpg" alt="4" />
</div>
</div>
</body>
</html>
Preciso incluir um texto em cada imagem, sendo que cada imagem tem um texto correspondente , que vem do banco de dados. Como faço para incluir esse texto ao lado da imagem ? esse codigo peguei de um site, está perfeito só
falta inserir o texto.
