En este caso os queremos mostrar como realizar una galería de imágenes sencillas con jQuery, esta galería constara de imagen «grande» y varias «pequeñas» y al situarnos sobre una pequeña se cambiara la grande por esta pequeña. Quedándonos algo parecido a lo siguiente:
Esta es una galería muy sencilla de implementar, lo primero que debemos hacer crearnos las imágenes grande y pequeñas de la siguiente forma:
<img src="coche1.jpg" alt="coche1" name="grande" width="338" height="253" id="grande" />
<div id="peques">
<img src="coche1.jpg" width="100" height="77" />
<img src="coche3.jpg" width="100" height="77" />
<img src="coche2.jpg" width="100" height="77" />
</div>
A la imagen grande la hemos llamado «grande» y el resto de imágenes que saldrán debajo de esta imagen están metidas en un div que se llama peques.
Después lo único que tenemos que hacer es indicarle que cuando nos situamos sobre una imagen pequeña esta imagen se ponga en el lugar de la grande, esto lo realizamos dentro de jQuery usando la función hover, quedando algo similar:
<script type="text/javascript">
$(document).ready(function(){
$("#peques img").hover(function(){
var imagen=$(this).attr("src");
$("#grande").attr("src",imagen);
});
})
</script>
Con estas sencillas ordenes ya tendríamos nuestra galería funcionando.
Excelente! estaba buscanto una galería simple de implementar!
Hola, tengo una consulta que haceros y os agradecería ayuda. A vuestro código le añadi un carrousel para poner más imágenes y mi problema ahora es que el efecto de hover no funciona en todas las imagenes.
Gracias de antemano por vuestro aporte y ayuda.
Hola, en principio sin ver el codigo se me ocurre que compruebes que has metido todas las imagenes dentro del div y que el nombre de las imagenes no tenga espacios en blanco.
Un saludo
El efecto funciona, aunque cambie hover por click. Hay 8 imagenes y el efecto funciona sin problema en las primeras 8, luego deja de funcionar en algunas. He intentado encontrar alguna lógica a en cuales funciona y la verdad es que no consigo encotrar el patrón. Os dejo el código. De nuevo, muchisimas gracias por la ayuda.
HTML.
<div id="slider1">
<a class="buttons prev" href="#"><</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/mrduck/1.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/2.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/3.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/4.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/5.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/6.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/7.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
<li><img src="images/mrduck/8.jpg" alt="mrduck" name="thumb" width="60" height="80" /></li>
</ul>
</div>
<a class="buttons next" href="#">></a>
</div>
<div class="grandes">
<img src="images/mrduck/8.jpg" alt="mrduck" name="grande" width="500" height="650" id="grande" />
</div>
JAVA/JQUERY
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".overview img").click(function(){
var imagen=$(this).attr("src");
$("#grande").attr("src",imagen);
});
})
</script>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.tinycarousel.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel();
});
</script>
El carrousel lo que hace es añadirte de forma automatica las imagenes, cambialo el orden y no carges dos veces el jquery, dejalo asi y deberia funcionar:
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.tinycarousel.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel();
});
$(document).ready(function(){
$(".overview img").click(function(){
var imagen=$(this).attr("src");
$("#grande").attr("src",imagen);
});
})
</script>
Funciona perfectamente, cuando acabe lo que estoy haciendo para un colega echare un ojo a vuestra página a ver si encuentro información de como usar Java y Jquery que como he podido demostrar tengo muy poca idea del tema.
Muchisimas gracias por tu o vuestra ayuda.