Inseri texto na galeria de imagem

luciano_lka · Dezembro 30, 2011

Olá, tenho o seguinte codigo:

<!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 inserir texto ao lado da imagem, iniciando no topo , apenas na imagem com Zoom, cada texto corresponde

a uma imagem que recebo do bando de dados mysql, alguém poderia me ajudar ?

Obrigado

William Bruno · Janeiro 3, 2012

formate com css:

        <ul id="myElement">
               <li><img src="img/1.jpg" alt="1" /><p>texto 1</p></li>
               <li><img src="img/2.jpg" alt="2" /><p>texto 1</p></li>
               <li><img src="img/3.jpg" alt="3" /><p>texto 1</p></li>
               <li><img src="img/4.jpg" alt="4" /><p>texto 1</p></li>
       </ul>

e acredito que você deva alterar aqui também:

var imgs = $$('#thumbs li');

div#myElement li {
/* .. */

div#myElement li.active {

luciano_lka · Janeiro 3, 2012

Obrigado William por responder a minha dúvida.

Fiz as alterações que você mencionou, não alterei a rotina 'div id="thumbs"'

porém agora não aparece a imagem com Zoom, poderia verificar se alterei certo ?

<!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>veja_mais</title>
<style type="text/css">
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

  #box{
  width:350px;
  height:250px;
  background:#ccc;
  display:none;/*Declara como none*/
}

div#myElement li{
	width:300px;
	height:250px;
	overflow:hidden;
}

div#myElement li.active {
	background-color:#EEEEEE;
	display:block;
	height:250px;
	margin:auto;
	width:290px;
}

div#thumbs img {
	margin-right:10px;
	float:left;
}

div#thumbs img.active {
	margin-right:10px;
	float:left;
}
</style>
<script src="Scripts/moo.rd_1.3.1_mootools_1.2.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	var imgs = $$('#thumbs li');
	var fx = new Fx.Cycles.fadeZoom('myElement', {
		autostart: false,
		duration:0,
		steps: 0,
		onAnimeIn: function(curr, next) {
			imgs.each(function(li, i) {
				if(i != this.count) img.removeClass('active');
				else img.addClass('active');
			}, this);
		}
	});

['1', '2', '3', '4', '5', ].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;">

<ul id="myElement">
	<li><img src="images/foto_teste_01.jpg" alt="1" /><p>texto 1</p></li>
	<li><img src="images/foto_teste_02.jpg" alt="2" /><p>texto 2</p></li>
	<li><img src="images/foto_teste_03.jpg" alt="3" /><p>texto 3</p></li>
	<li><img src="images/foto_teste_04.jpg" alt="4" /><p>texto 4</p></li>
	<li><img src="images/foto_teste_05.jpg" alt="5" /><p>texto 5</p></li>
</ul>

	<br><br>

<div id="thumbs">
	<img id="img1" class="active" src="images/foto_teste_01.jpg" width="80" height="80" alt="1" />
	<img id="img2" src="images/foto_teste_02.jpg" width="80" height="80" alt="2" />
	<img id="img3" src="images/foto_teste_03.jpg" width="80" height="80" alt="3" />
	<img id="img4" src="images/foto_teste_04.jpg" width="80" height="80" alt="4" />
	<img id="img5" src="images/foto_teste_05.jpg" width="80" height="80" alt="5" />
</div>

</div>
</body>
</html>

Obrigado!!!

Entrar

Arquivado

Inseri texto na galeria de imagem

Recommended Posts

luciano_lka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

luciano_lka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante