Estou tentando criar um slide show, mas não to conseguindo gravar um array com as informações necessárias:
<html>
<head>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul{width: 200px; position: absolute; left: 50%; margin: 0 0 0 -100px;}
ul li{background-color: #F4F4F4; border: 1px solid #CCCCCC; border-radius: 4px; width: 200px; float: left;}
ul li #image{width: 180px; float: left; margin: 10px;}
ul li #legenda{width: 180px; floa: left; margin: 10px;}
ul li #legenda p{text-align: center;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var li = document.getElementById('lightbox').getElementsByTagName('li');
var total = li.length;
var atual = 0;
var src = '';
var legenda = new Array();
for(i = 0; i < li.length; i++){
li[i].style.display = 'none';
src[i] = $('li['+i+'] #image img').attr('src');
legenda[i] = $('li['+i+'] #legenda p').html();
}
alert('src:'+src[atual]+'---legenda:'+legenda[atual]);
});
</script>
</head>
<body>
<ul id="lightbox">
<li>
<div id="image">
<img src="img/01.jpg" width="180" height="190" border="0"/>
</div>
<div id="legenda">
<p>Esta é a legenda da imagem</p>
</div>
</li>
<li>
<div id="image">
<img src="img/02.jpg" width="180" height="190" border="0"/>
</div>
<div id="legenda">
<p>Esta é a legenda da imagem</p>
</div>
</li>
</ul>
<a href="#" id="next">p</a>
</body>
</html>
Era pra ler as ul li e gravar o src da imagem e o conteudo do p e depois me exibir em um alert:
src:img/01.png---legenda:Esta é a legenda da imagem
Mas exibe isso:
src:undefined---legenda:null
O problema está provavelmente nestas linhas:
Pergunta
vini_loock
Olá.
Estou tentando criar um slide show, mas não to conseguindo gravar um array com as informações necessárias:
<html> <head> <style type="text/css"> *{margin: 0px; padding: 0px;} ul{width: 200px; position: absolute; left: 50%; margin: 0 0 0 -100px;} ul li{background-color: #F4F4F4; border: 1px solid #CCCCCC; border-radius: 4px; width: 200px; float: left;} ul li #image{width: 180px; float: left; margin: 10px;} ul li #legenda{width: 180px; floa: left; margin: 10px;} ul li #legenda p{text-align: center;} </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var li = document.getElementById('lightbox').getElementsByTagName('li'); var total = li.length; var atual = 0; var src = ''; var legenda = new Array(); for(i = 0; i < li.length; i++){ li[i].style.display = 'none'; src[i] = $('li['+i+'] #image img').attr('src'); legenda[i] = $('li['+i+'] #legenda p').html(); } alert('src:'+src[atual]+'---legenda:'+legenda[atual]); }); </script> </head> <body> <ul id="lightbox"> <li> <div id="image"> <img src="img/01.jpg" width="180" height="190" border="0"/> </div> <div id="legenda"> <p>Esta é a legenda da imagem</p> </div> </li> <li> <div id="image"> <img src="img/02.jpg" width="180" height="190" border="0"/> </div> <div id="legenda"> <p>Esta é a legenda da imagem</p> </div> </li> </ul> <a href="#" id="next">p</a> </body> </html>Era pra ler as ul li e gravar o src da imagem e o conteudo do p e depois me exibir em um alert: src:img/01.png---legenda:Esta é a legenda da imagem Mas exibe isso: src:undefined---legenda:null O problema está provavelmente nestas linhas:src[i] = $('li['+i+'] #image img').attr('src'); legenda[i] = $('li['+i+'] #legenda p').html();Tentei em js puro, mas não deu ai tentei com jquery e num mudo nada.
Link para o comentário
Compartilhar em outros sites
5 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.