Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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>
:-)
10
Puntos
9585
Visitas
1
Resp
Por Jose hace 58 meses
Experto Sitio web
Respuesta #1
No funciona
https://www.lawebdelprogramador.com/foros/JQuery/1659902-Galeria-de-imagenes-no-funciona.html
0
Puntos
Por Jhon hace 5 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate