Galeria sencilla de imagenes en JQUERY
Publicado por VLPA (1 intervención) el 23/11/2014 22:50:59
Muy buenas a todos, pues quería saber mas o menos como hacer lo básico de una galería de fotos en JQUERY, ya que lo que quiero hacer es, tener 3 imágenes a la izquierda y una grande en el centro y que cuando clique en la una de las imágenes pequeñas de la izquierda se ponga donde está la grande. Me sale todo, pero me falla lo más importante que es esa parte, clicar en la imagen y salga al lado en grande, pero manteniéndose en pequeño a la izquierda.
Lo intenté hacer con attr() pero no me sale, ¿alguna solución sencilla?, aquí os dejo el código:
<!DOCTYPE html>
<html>
<head>
<script src="JS/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#peques").click(function(){
var imagen=$(this).attr("src");
$("#grande").attr("src",imagen);
});
});
</script>
</head>
<body>
<img src="imagine1.jpg" alt="..." width="338" height="253" id="grande" />
<div id="peques">
<img src="imagen1.jpg" width="100" height="77" />
<img src="imagen2.jpg" width="100" height="77" />
<img src="imagen3.jpg" width="100" height="77" />
</div>
</body>
</html>
Lo intenté hacer con attr() pero no me sale, ¿alguna solución sencilla?, aquí os dejo el código:
<!DOCTYPE html>
<html>
<head>
<script src="JS/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#peques").click(function(){
var imagen=$(this).attr("src");
$("#grande").attr("src",imagen);
});
});
</script>
</head>
<body>
<img src="imagine1.jpg" alt="..." width="338" height="253" id="grande" />
<div id="peques">
<img src="imagen1.jpg" width="100" height="77" />
<img src="imagen2.jpg" width="100" height="77" />
<img src="imagen3.jpg" width="100" height="77" />
</div>
</body>
</html>
Valora esta pregunta
0