Crear galería de imágenes sencilla
Bien, en éste tema aprenderás a como crear una galería de manera sencilla, los lenguajes que usaremos serán HTML y jQuery. No te preocupes porque es bastante sencillo, elije varias imágenes ( preferiblemente que tengan la misma medida) y empecemos.
Las imágenes que usaré son las siguientes
Imagen 1
Imagen 2
Imagen 3
Imagen 4
Lo primero será crear un div entre las etiquetas <body> y mediante CSS darle el mismo ancho y alto que las imágenes, además deberemos colcoarle un overflow:hidden ya que ésto nos permitirá no ver las demás imágenes, solo una que es la que cabe en el div.
Las imágenes que usaré son las siguientes
Imagen 1
Imagen 2
Imagen 3
Imagen 4
Lo primero será crear un div entre las etiquetas <body> y mediante CSS darle el mismo ancho y alto que las imágenes, además deberemos colcoarle un overflow:hidden ya que ésto nos permitirá no ver las demás imágenes, solo una que es la que cabe en el div.
<html> <head> <title>Galería de imágenes</title> <style> div { width:600px; height:400px; overflow:hidden; } </style> </head> <body> <div> </div> </body> </html>Dentro de ese <div> haremos una lista donde colocaremos las imágenes, así. Pero también modificaremos la lista en css para un mejor resultado. Observa el script.
<html> <head> <title>Galería de imágenes</title> <style> div { width:600px; height:400px; overflow:hidden; } ul,li { padding:0px; margin:0px; } li { float:left; list-style:none; } </style> </head> <body> <div> <ul id="galeria"> <li> <img src="imagen1.jpg"> </li> <li> <img src="imagen2.jpg"> </li> <li> <img src="imagen3.jpg"> </li> </ul> </div> </body> </html>Bajo ese div, debemos poner unos botones que serán los de ir a siguiente y anterior.
<button id="next">Siguiente</button> <button id="before">Anterior</button>Una vez hecho esto, iremos al <head> y colocaremos el siguiente script.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).on('ready',function() { $('#next').click(function() { $('#galeria li:first').appendTo('#galeria:first'); }); $('#before').click(function() { $('#galeria li:last').prependTo('#galeria:first'); }); }); </script>Finalmente, el código debería quedar así.
<html> <head> <title>Galería de imágenes</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).on('ready',function() { $('#next').click(function() { $('#galeria li:first').appendTo('#galeria:first'); }); $('#before').click(function() { $('#galeria li:last').prependTo('#galeria:first'); }); }); </script> <style> div { width:600px; height:400px; overflow:hidden; } ul,li { padding:0px; margin:0px; } li { float:left; list-style:none; } </style> </head> <body> <div> <ul id="galeria"> <li> <img src="imagen1.jpg"> </li> <li> <img src="imagen2.jpg"> </li> <li> <img src="imagen3.jpg"> </li> </ul> </div> <button id="next">Siguiente</button> <button id="before">Anterior</button> </body> </html>:-)
Respuesta #1
No funciona
https://www.lawebdelprogramador.com/foros/JQuery/1659902-Galeria-de-imagenes-no-funciona.html
https://www.lawebdelprogramador.com/foros/JQuery/1659902-Galeria-de-imagenes-no-funciona.html
0
Puntos
Puntos
Por Jhon hace 70 meses
Principiante