Bueno, vamos a ver los que sale, no prometo que esté todo bien, pues lo he rehecho sin probarlo, que no tengo tanto tiempo, el css no se corresponde al link de más arriba, debido a que he cogido el slider que cree en un principio que es básicamente igual, pero con otro estilo. En cuanto pueda subo una muestra de este nuevo a mi server y os lo muestro.
Empezamos con los datos, voy a poner un objeto, pero podría ser un JSON con varios sliders o una BD con los datos o ...
Código Javascript :
jsonData = {'anchoImagen': 733,
'altoImagen': 300,
'anchoTotal': 930,
'alturaBox': 75,
'carpetaImagenes': 'img.cristalab.com/slider/sliderA/',
'imagenes':[
{'url': '1.jpg', 'Link': '1.cristalab.com', 'titulo': 'Uno', 'subtitulo': 'Primero'},
{'url': '2.jpg', 'Link': '2.cristalab.com', 'titulo': 'Dos', 'subtitulo': 'Segundo'},
{'url': '3.jpg', 'Link': '3.cristalab.com', 'titulo': 'Tres', 'subtitulo': 'Tercero'},
{'url': '4.jpg', 'Link': '4.cristalab.com', 'titulo': 'Cuatro', 'subtitulo': 'Cuarto'},
{'url': '5.jpg', 'Link': '5.cristalab.com', 'titulo': 'Cinco', 'subtitulo': 'Quinto'},
]
};Después el html:
Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cristalab slider</title>
<link href="css/cristalab.slider.css" type="text/css" rel="stylesheet" />
<script src="jquery.js" type="text/javascript"></script>
<script src="js/cristalab.slider.js" type="text/javascript"></script>
</head>
<body>
<div id="contenedor"></div>
</body>
</html>
Como vemos sólo nos hace falta un div contenedor.
Ahora vamos a poner el css (Que no voy a explicar, por si acaso alguno...)
Código HTML :
* {padding: 0; margin: 0; font-size: 12px; font-family: Ubuntu}
.bloqueDisplay {
display: block;
border: 1px solid #000;
overflow: hidden;
cursor: pointer;
}
.imagen {
background-color: #FFF;
border: 1px solid #000;
display: block;
position: relative;
float: left;
}
.boxImg {
display: block;
border: 1px solid #000;
position: relative;
float: left;
left: -1px;
}
.contBoxImg {
width: 100%;
height: 100%;
background: #000;
opacity: 0.65;
filter: Alpha(opacity=65);
}
.titular {
color: white;
font-size: 12px;
position: relative;
float: left;
left: 0;
padding-left: 15px;
text-align: left;
}
.subtitular {
float:left;
display:block;
text-align: left;
color: #FFF;
font-size: 12px;
position: relative;
line-height: 12px
}
.titulo {
padding-top:18px;
font-size: 20px;
}
.parpadeo {
width: 100%;
height: 100%;
background: #FFF;
}
.sombra {
display: block;
position: relative;
float: left;
width:1px;
height: 0px;
}
.sombraIzquierda {
box-shadow: -8px -2px 16px #000;
-webkit-box-shadow: -8px -2px 16px #000;
-moz-box-shadow: -8px -2px 16px #000;
}
#bgNegro {
display: block;
z-index: 2;
background: #000;
opacity: 0.9;
filter: Alpha(opacity=90);
width: 932px;
height: 140px;
color: white;
}
#menuTxt {
display: block;
height: 20px;
background: #000;
position: relative;
top: -20px;
}
#menusHover {
display: block;
position: relative;
width: 932px;
height: 140px;
z-index: 101;
top: -40px;
cursor: pointer;
}Y al fin el Javascript
Código Javascript :
// Ejecuto cuando el DOM esté completamente cargado
$(document).ready(function () {
//Defino las variables iniciales
var cont = $('#contenedor'), // Defino el objeto sobre el que voy a trabajar
carpetaImagenes = jsonData.carpetaImagenes, // Defino la carpeta imágenes
anchoImagen = jsonData.anchoImagen, // Defino el ancho de las imágenes
altoImagen = jsonData.altoImagen, // Defino el alto de las imágenes
anchoTotal = jsonData.anchoTotal, // Defino el ancho del contenedor
totalImagenes = jsonData.imagenes.length, // Calculo la catidad de imágenes
boxNegro = alturaBox, // Defino el alto de la caja inferior de textos
//Calculo la posición de las imágenes cerradas (cuando hay una en hover)
cerrado = (anchoTotal-anchoImagen)/(totalImagenes-1),
imagenes = jsonData.imagenes; // Defino las imágenes
// Añado la clase bloque display al contenedor
cont.addClass('bloqueDisplay');
// Aplico las medidas al contenedor
cont.css({'width': anchoTotal, 'height': altoImagen});
// Ejecuto la funcion que crea el slider
crear_slider();
function crear_slider () {
// Por cada imagen
for (numero in imagenes) {
// Creo el div completo como string
var url = imagenes[imagen].url,
divImagen = '<div class="imagen" id="imagen'+numero+
'" valor="'+numero+'" style="width:'+anchoImagen+
'px; height:'+altoImagen+'px; left:'+
// Calculo la posicion izquierda de la imagen
// Divido en ancho del contenedor por el total de imágenes,
// lo multiplico por el indice
// Le resto 1 para arreglar el pixel del borde
//y que en el primero no se vea borde doble a la izquierda
(((anchoTotal/totalImgagenes)*numero)-1) +
// Esto de calcular el top es un arreglo chapucero que hice,
// pues aún no entendía muy bien las position absolute,
// y lo tenía todo con position relative (MENUDO CAOS...)
// con usar position absolute podríais saltaros este top
'px; top:'+(-((altoImagen+2)*numero)-1)+
// Agrego el div que parpadea al hacer roll over, al final.
'px; z-index:'+numero+'; background: url('+url+')">'+
'<div class="parpadeo"></div></div>';
cont.append(divImagen); // Agrego el div al contenedor
}
// Ejecuto la función que me rellena las imágenes
rellenar();
}
function rellenar () {
// A cada div .imagen le agregamos la clase que le da la sombra
$('div .imagen').each(function () {
$(this).addClass('sombraIzquierda')
});
// Desvanezco en 0 ms todos los divs parpadeo
$('div .parpadeo').each(function () {
$(this).fadeTo(0, 0).dequeue()
});
// A cada div imagen le agrego los contenidos
$('div .imagen').each(function () {
// Para los tops que en adelante digo lo mismo que dije arriba,
// usar position absolute y pasar de calcularlos
// Creo las cajas inferiores de los textos
var boxImg = '<div class="boxImg" style="top:'+
-(boxNegro+1)+'px; width:'+
anchoImagen+'px; height:'+boxNegro+'px">'+
'<div class="contBoxImg"></div><div class="titular" style="top:-'+
boxNegro+'px; width:'+(anchoTotal/totalImagenes)+'px; padding-top:'+
// Calculo la altura de los textos dentro de la caja
// Probablemente es más sencillo hacerlo con lineHeight
// = boxNegro + 2 (Aprox. depende del tamaño del texto)
((boxNegro/2)-8)+'px"><\/div><div class="subtitular" style="top:'+
-boxNegro+'px; left:-'+
(anchoTotal/totalImagenes)+'px; height:'+
boxNegro+'px"><\/div><\/div>';
// Agrego el contenido
$(this).append(boxImg);
});
// Agrego los títulos a las imágenes
$('div .titular').each(function (indice) {
$(this).append(imagenes[indice].titulo)
});
// Agrego lso subtítulos a las imágenes
$('div .subtitular').each(function (indice) {
// Defino la imagen de la que extraer los datos
var nodo = imagenes[indice];
$(this).append(
'<div class="titulo">'+nodo.titulo+'</div></br>'+nodo.subtitulo
);
// Desvanezco en 0 ms todos los divs subtitular
// (Es lo que se mostrará al hacer hover a la imagen)
$(this).fadeTo(0, 0).dequeue();
});
// Creo los eventos del hover
$('#contenedor > div').hover(
// La funcion OVER
function () {
// Obtengo el número de imagen sobre el que estoy
var num = $('#contenedor > div').index(this);
// Hago parpadear el div blanco (.parpadeo)
var parp = $(this).find('div:eq(0)');
parp.fadeTo(0, 0.5);
parp.fadeTo(500, 0);
// Desvanezco el Título y hago aparecer el subtítulo
$(this).find('div:eq(2)').find('div:eq(1)').fadeTo(300,0).dequeue();
$(this).find('div:eq(2)').find('div:eq(2)').fadeTo(300,1).dequeue();
// Calculo las posiciones y llamo a la función reposicionar
// Defino un array vacío
var arr = [];
// Si estamos en la primera imagen
if (num == 0) {
// Calculo la posición x de cada imagen y la inserto n el array
for (i=1; i<totalImagenes; i++) {
arr.push(anchoImagen+(cerrado*(i-1)))
}
// Si estoy en la última imagen
} else if (num == (totImg-1)) {
// Calculo la posición x de cada imagen y la inserto n el array
for (i=1; i<totalImagenes; i++) {arr.push(((cerrado*i)+1))}
// Si estoy en cualquier otra imagen
} else {
for (i=1; i<totalImagenes; i++) {
// Si i está antes que la imagen con el Over
if (i <= num) {arr.push(cerrado*i)}
// Si está detrás
else {arr.push(anchoImagen+(cerrado*(i-1)))}
}
}
// Ejecuto reposicionar enviando el array
reposicionar(arr);
},
// La funcion OUT
function () {
// Desvanezco los subtítulos y hago aparecer los títulos
$(this).find('div:eq(2)').find('div:eq(1)').fadeTo(300, 1).dequeue();
$(this).find('div:eq(2)').find('div:eq(2)').fadeTo(300, 0).dequeue();
// Defino un array vacio
var pxs = [];
// Calculo las posiciones principales y se las envío a reposicionar
for (i=1; i<totalImagenes; i++) {
pxs.push(parseInt(((anchoTotal/totalImagenes)*i)-1))
}
reposicionar(pxs);
});
$('#contenedor > div').click(function () {
// Obtengo el número de imagen sobre el que estoy
var num = $('#contenedor > div').index(this);
// Cargo la url
window.location.href = 'http://'+imagenes[num].Link;
});
}
});
//FUNCION REPOSICIONAR se encarga de todos los movimientos
// recibe un array (PXS)
function reposicionar (pxs) {
// Por cada dato en el array
for (i=0; i<pxs.length; i++) {
// Defino el target por el ID
var tgt = '#imagen'+(i+1);
// Le animo el left
$(tgt).animate({left:pxs[i]}, 300).dequeue();
}
}Ale ahí dejo el chorizo, ahora a darle mordisquitos.
Espero os sirva,
saludos.
Escrito el 03 Mar 2012 04:15 pm
