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.

<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>

:-)
Editado

10
Puntos

11397
Visitas

1
Resp

Por jose hace 11 años

Master

Respuesta #1

No funciona
https://www.lawebdelprogramador.com/foros/JQuery/1659902-Galeria-de-imagenes-no-funciona.html

0
Puntos

Por jhon hace 7 años

Novice