Galería y carrousel de imágenes
En este artículo vamos a explicar como crear una galería de imágenes que podría ser interesante incrustar en las fichas de productos de nuestra tienda virtual o en el catálogo de servicios con carrousel de subimágenes.
Tal como se muestra en la imagen anterior, vamos a tener una imagen grande y subimágenes debajo que se iterarán pulsando en las flechas de las bandas mostrándose de entrada 3.
Al hacer click en las flechitas que aparecen en los laterales de las subimágenes itera para ver otras imágenes que también haciendo click se muestran en grande. Podemos tener ilimitadas imágenes.
Para que todo lo mencionado funcione vamos a emplear jQuery, CSS + HTML.
El código HTML que tendremos en el <body> es bastante sencillo:
<div id="content"> <img id="bigimage" src="gallery/01.jpg"/> <div id="carrusel"> <a href="#"><img src="images/flecha_01.png" /></a> <a href="#"><img src="images/flecha_02.png" /></a> <div class="carrusel"> <div id="imagen_0"><img class="img_carrusel" src="gallery/02.jpg" width="195px" height="100px" /></div> <div id="imagen_1"><img class="img_carrusel" src="gallery/03.jpg" width="195px" height="100px" /></div> <div id="imagen_2"><img class="img_carrusel" src="gallery/04.jpg" width="195px" height="100px" /></div> <div id="imagen_3"><img class="img_carrusel" src="gallery/05.jpg" width="195px" height="100px" /></div> </div> </div> </div>
Tenemos un contenedor que contiene la imagen grande y debajo un carrousel de subimágenes. En principio hay 4, de las que se mostrarán 3.
El código jQuery que realiza la funcionalidad es lo siguiente:
<script src="../jquery.js" type="text/javascript"></script>
<script>
var posicion = 0;
var imagenes = new Array();
$(document).ready(function() {
var numeroImatges = 4;
if(numeroImatges<=3){
$('.derecha_flecha').css('display','none');
$('.izquierda_flecha').css('display','none');
}
$('.img_carrusel').live('click',function(){
$('#bigimage').attr('src',$(this).attr('src'));
return false;
});
$('.izquierda_flecha').live('click',function(){
if(posicion>0){
posicion = posicion-1;
}else{
posicion = numeroImatges-3;
}
$(".carrusel").animate({"left": -($('#imagen_'+posicion).position().left)}, 600);
return false;
});
$('.izquierda_flecha').hover(function(){
$(this).css('opacity','0.5');
},function(){
$(this).css('opacity','1');
});
$('.derecha_flecha').hover(function(){
$(this).css('opacity','0.5');
},function(){
$(this).css('opacity','1');
});
$('.derecha_flecha').live('click',function(){
if(numeroImatges>posicion+3){
posicion = posicion+1;
}else{
posicion = 0;
}
$(".carrusel").animate({"left": -($('#imagen_'+posicion).position().left)}, 600);
return false;
});
});
</script>
Y los estilos son los siguientes:
#carrusel{float:left; width:588px; overflow:hidden; height:100px; position:relative; margin-top:20px;}
#carrusel .izquierda_flecha{position:absolute; left:10px; z-index:1; top:50%; margin-top:-9px;}
#carrusel .derecha_flecha{position:absolute; right:10px; z-index:1; top:50%; margin-top:-9px;}
.carrusel{width:4000px;left:0px; position:absolute; z-index:0}
.carrusel>div{
float: left;
height: 100px;
margin-right: 5px;
width: 195px;
text-align:center;
}
.carrusel .img_carrusel{cursor:pointer;}
#content {
float:left;
width:600px;
margin-bottom:40px;
margin:0px auto;
}
Autor
¿Buscas trabajo de programador?
21 respuestas a “Galería y carrousel de imágenes”
Deja una respuesta
68 artículos que te podrían interesar
me trabaja bien y todo pero nos e como hacer para que sea de 5 imágenes en ves de 3, alguien sabe que debo de cambiar?
si, en ese caso tendrás que fijarte bien en el css que está ajustado para 3.
Hola Jose Aguilar, el ejemplo es justo lo que ando buscando, sin embargo, coloco el codigo tal cual y no se ve como en el ejemplo
¿habra que agregar algo?
Hola,
En breve intentaremos revisar el código presente en el tutorial para ver si se corresponde con el ejemplo. Por ahora puedes revisar el código fuente del ejemplo en funcionamiento para copiar el código.
Saludos
hola!
he intentado poner todos los codigos pero no me sale.
En la página web me pone como tres iconos pequeños y nada mas y era por si me podias ayudar y ponerme directamente todo el codigo para realizar una galeria de imagen html
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay disponible en el blog lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
Hola,
comprueba que tienes las imagenes en la carpeta indicada
Hola,
muchas gracias por el código. Una corrección falta la clase en las flechas para que de este modo funcione el codijo jquery
pero a la hora de dar una flecha la imagen se recorra y no que tenga que ir seleccionando las imagenes como en ese esta muy bueno ese ejemplo como puedo hacer lo que quiero?
hola, si quiere envíenos un email a blog@jose-aguilar.com con todos los detalles y le indicamos que podríamos hacer al respecto
hola yo tengo un codigo parecido al tu yo pero mi problema es que quiero que la imagen que se ve en los recuadros pequeños se vea en el grande
Hola! Al usar el código me da el siguiente error:
TypeError:$(…).live is not a function a que se puede deber?
Gracias!
Solucionado, añadido el a jquery.
Ya lo he solucionado 🙂
He cambiado la extensión del archivo de jquery: js/jquery.js.php y luego he utilizado código php para poder dar el valor del número de columnas que tiene la tabla de la base de datos a: var numeroImatges.
Viendo que antes el código no se ha copiado entero, si me dices cómo puedo copiarlo bien lo pongo por si a alguien le puede servir de ayuda 😉
Muchas gracias!!!
Ana.
Hola!,
sí, eso ya lo he hecho, pero el id=»imagen_n» que va en el div de cada imagen también tedría que cambiarlo para que el contador del código de jquery haga que las fotos se muevan, (el número de fotos irá variando según se vayan incluyendo más fotos a la base de datos, con lo que no puedo hacer un contador con un número fijo, tiene que ser dinámico), y es lo que no se cómo hacer… 🙁
Muchísimas gracias de nuevo de antemano y un saludo,
Ana.
Perdona, me he explicado mal, tengo todo hecho, lo que no se hacer es cómo pasar al código de jquery el número de fotos que hay en la base de datos (que no es un número fijo…), es decir, qué valor habría que darle a: var numeroImatges
El resto me funciona a la perfección, por si a alguien le sirviera copio el código:
<?php
$i = "-1";
while($resultado = mysql_fetch_assoc($registro)){
$i=$i+1;
echo "»;
}
?>
// jQuery.noConflict();
var posicion = 0;
var imagenes = new Array();
$(document).ready(function() {
//alert(jQuery(‘.texto’).html());
var numeroImatges = 20;
if(numeroImatges0){
posicion = posicion-3;
}else{
posicion = numeroImatges-3;
}
$(«.carrusel»).animate({«left»: -($(‘#imagen_’+posicion).position().left)}, 600);
return false;
});
$(‘.izquierda_flecha’).hover(function(){
$(this).css(‘opacity’,’0.5′);
},function(){
$(this).css(‘opacity’,’1′);
});
$(‘.derecha_flecha’).hover(function(){
$(this).css(‘opacity’,’0.5′);
},function(){
$(this).css(‘opacity’,’1′);
});
$(‘.derecha_flecha’).live(‘click’,function(){
if(numeroImatges>posicion+3){
posicion = posicion+3;
}else{
posicion = 0;
}
$(«.carrusel»).animate({«left»: -($(‘#imagen_’+posicion).position().left)}, 600);
return false;
});
});
Hola Ana que tal,
Será muy sencillo, tan solo deberás hacer una consulta que te retorne el número de imágenes que hay en la base de datos y guardarlo en una variable y luego:
var numeroImatges = ;
Si así no te funciona deberás buscar como incrustar código php dentro de javascript.
Saludos,
Hola Jose,
a mí también me ha ayudado mucho éste turorial 😉
Pero en mi caso lo que quiero es que las fotos las coja de una base de datos de mysql, ¿cómo podría pasar los datos al código jQuery?
Muchas gracias de antemano y un saludo,
Ana.
Hola,
tendrás que conectar a la base de datos y hacer un bucle de los registros o fotos. No hace falta pasar los datos al jquery, solo necesitarás rellenar dinámicamente los src de las imágenes del código html del tutorial
Hola Amigo, me sirvio mucho tu Tutorial.
Una pregunta, como puedo hacer que la flecha se oculte, cuando no queden imagenes, ya sea a la derecha o a la izquierda???
Y otra, que no se regrese el carrusel de las imagenes pequeñas, cuando finalize en cualquier lado…
Espero tu ayuda…
De Antemano, Gracias…
hola
dentro de la llamada que se hace cuando haces click en una de las flechas:
$(‘.izquierda_flecha’).live(‘click’,function(){
deberás añadir algo k controle lo k kieres, en el caso de la flexa izq deberas poner:
if(posicion==0){
$(‘.izquierda_flecha’).css(‘display’,’none’);
o otra opción más elegante para mi gusto;
$(‘.izquierda_flecha’).hide();
}