Galería de Imágenes Interactiva con jQuery: Cambio de Fotos y Miniaturas
Galería de Imágenes que Cambian
HTML
Clase 2
$("#thumb1").click(function(){
$("#foto1").attr("src","images/foto1.jpg");
$("#thumb1").attr("src","images/thumbs_bn/Foto1.jpg");
$("#thumb2").attr("src","images/thumbs/Foto2.png");
$("#thumb3").attr("src","images/thumbs/Foto3.jpg");
$("#thumb4").attr("src","images/thumbs/Foto4.png");
});
$("#thumb2").click(function(){
$("#foto1").attr("src","images/foto2.png");
$("#thumb2").attr("src","images/thumbs_bn/Foto2.png");
$("#thumb1").attr("src","images/thumbs/Foto1.jpg");
$("#thumb3").attr("src","images/thumbs/Foto3.jpg");
$("#thumb4").attr("src","images/thumbs/Foto4.png");
});
$("#thumb3").click(function(){
$("#foto1").attr("src","images/foto3.jpg");
$("#thumb3").attr("src","images/thumbs_bn/Foto3.jpg");
$("#thumb1").attr("src","images/thumbs/Foto1.jpg");
$("#thumb2").attr("src","images/thumbs/Foto2.png");
$("#thumb4").attr("src","images/thumbs/Foto4.png");
});
$("#thumb4").click(function(){
$("#foto1").attr("src","images/foto4.png");
$("#thumb4").attr("src","images/thumbs_bn/Foto4.png");
$("#thumb1").attr("src","images/thumbs/Foto1.jpg");
$("#thumb2").attr("src","images/thumbs/Foto2.png");
$("#thumb3").attr("src","images/thumbs/Foto3.jpg");
});
CSS
body{
background: #D9D9FF;
}
#wrapper{
margin: 0px auto;
width: 700px;
}
.img_borde{
border: 2px solid pink;
}
.img_normal{
border: none;
}
Cuadro que se Mueve
Document
.cuadro{
width: 100px;
height: 100px;
border: 1px solid gray;
}
.cuadro:hover{
border: 1px solid red;
cursor: pointer;
}
#div2{
background-color: blue;
float: left;
}
#div3{
clear: both;
}
Página de Prueba
$("#boton1").click(function(){
alert("Hola mundo");
});
$("#div1").click(function(){
$("#div1").css("background-color","red");
$("#div1").html("Inacap");
$("#div1").css("color","white");
});
$("#boton_izq").click(function(){
$("#div2").css("float","left");
});
$("#boton_der").click(function(){
$("#div2").css("float","right");
});
Estructura Básica
Document
header
hero
cont1
cont2
cont3
footer