//script para cargar con ajax las imagenes e insertarlas en el div imagen_cabecera //elemento que alberga el slider completo var contenedorSlider = ""; //elemento que contiene solo los banners var contenedorImg = ""; //elemento que contiene solo los botones var contenedorBot = ""; //variable global que almacenará la lista de id's de las imagenes var listaBanners = []; //variable global que indica si la imagen grande ha terminado de cargar y desplazarse //para cargar la siguiente en el modo automático var activo = true; //variable global que almacena la posicion del boton que se encuentra acitvo var posActual = ''; //variable global que almacena el numero de botones del slider var numEl = ''; //comenzamos la fieshta jQuery(document).ready(function() { //en primer lugar cargamos los elementos que forman el slider //elemento que alberga el slider completo contenedorSlider = jQuery('#slider_banners_central'); //elemento que contiene solo los banners contenedorImg = jQuery('#sp_cont_banner'); //elemento que contiene solo los botones contenedorBot = jQuery('#sp_cont_botones'); contenedorBot.css('display','none'); cargaAjax(); sliderBotones(); }); //funcion para hacer click en el slider de forma automática //el temporizador hacer que el slider vaya hacia delante solamente //por eso asignamos al propio boton de avanzar el temporizador //la función ejecuta un click sobre el botón pasados 5s desde la llamada function autoslide(modo) { switch(modo) { case 'play': //si activamos el autoslide, ponemos en marcha un temporizador que llamará a la función //para cambiar de imagen cada segundo contenedorBot.everyTime("6s","disparadorslider",function() { //si la imagen se ha cargado y ha terminado de moverse, cargamos la siguiente if (activo == false) { cambiaImagen(); } }); break; case 'stop': //paramos el temporizador que lanza el vento contenedorBot.stopTime("disparadorslider"); break; } function cambiaImagen() { contenedorBot.oneTime("1s", "autoslide", function() { var posElSiguiente; //disparamos el evento en el boton siguiente al actual if(posElActual == numEl - 1) { posElSiguiente = 0; } else { posElSiguiente = posElActual +1; } elSiguiente = jQuery('.sp_boton').eq(posElSiguiente); jQuery(elSiguiente).trigger("click.miseventos"); }); } }//autoslide function creaSlider() { var srcImgFondo = '/lang/img/fondos/fondo_slider_portada.jpg'; //la imagen de fondo del slider es la última en cargarse //crearemos una imagen virtual donde cargaremos la imagen de fondo del slider //y mediante el evento 'load' determinaremos el momento en que ya está cargada //y activaremos el slider //creamos un elemento imagen que nos servira de cargador para conocer el evento de carga de la imagen var imgFondo = new Image(); //cuando el elemento imagen se haya cargado detectamos el evento jQuery(imgFondo).one('load',function () { //asignamos la misma imagen como fondo del slider contenedorSlider.css('background','transparent url('+srcImgFondo+') no-repeat 0 0'); //cambiamos la visibilidad a visible contenedorSlider.fadeOut(0,function(){ contenedorSlider.css('visibility','visible'); contenedorSlider.fadeIn(1000, function() { //no se puede cufonear texto que se encuentre dentro de un elemento invisible con IE8 //hay que esperar a hacerlo visible; con la opacidad no pasa Cufon.replace('.sp_boton', { fontFamily: 'Helvetica-lt-condensed-light' }); contenedorBot.fadeIn(2000); }); //inicializamos el modo autoslide jQuery(autoslide('play')); }); }).error(function () { }) //damos al elemento imagen provisional el origen de la imagen de fondo para que la cargue .attr('src', srcImgFondo); }//creaslider function cargaAjax() { //xml del album que vamos a cargar urlAjax = '/cgi-bin/noticias/modboletin_xml.php?refbol=banners&refsec=slider-portada&idiprin=1&autolang=1&forcelang=1&xslt_plantilla=slider_img_portada.xslt'; //cargamos la lista de id de elementos mediante ajax jQuery.get(urlAjax, function(data) { contenedorImg.html(data); contenedorImg.find('.sp_cont_banner').each(function() { //variable temporal para almacenar el valor de cada id var tmpBanner = jQuery(this).html(); //introducimos el id en el array para almacenarlos listaBanners.push(tmpBanner); jQuery(this).remove(); }); //cargamos la primera imagen cargaBanner(listaBanners[0]); //ponemos en marcha el slider creaSlider(); }); }; //funcion para cargar las imagenes, pasando como argumentos el id del contenedor y el de la foto var cargaBanner = function(htmlBanner) { //variable global que debe estar en false mientras la imagen se carga y se desplaza para el modo automático activo = true; //ocultamos todo lo que no sean imagenes de golpe porque el explorer no hace fundido con el texto var contenidoActualBannerNoImagen = jQuery(contenedorImg).children().not('img'); contenidoActualBannerNoImagen.fadeOut(500); //ocultamos el contenido del banner contenedorImg.fadeOut(1000,function() { //lo metemos en el contenedor contenedorImg.html(htmlBanner); //recargarmaos las fuentes Cufon.refresh(); //ocultamos todo lo que no sean imagenes de golpe porque el explorer no hace fundido con el texto var contenidoNuevoBannerNoImagen = jQuery(contenedorImg).children().not('img'); contenidoNuevoBannerNoImagen.css('display','none'); //la primera imagen tarda más en cargarse que el texto //crearemos una imagen virtual donde cargaremos la imagen //y mediante el evento 'load' determinaremos el momento en que ya está cargada //y mostraremos entonces el banner //creamos un elemento imagen que nos servira de cargador para conocer el evento de carga de la imagen var primeraImagen = new Image(); //cuando el elemento imagen se haya cargado detectamos el evento jQuery(primeraImagen).load(function () { //la mostramos contenedorImg.fadeIn(1000,function() { //mostramos todo lo que no sean imagenes porque el explorer no hace fundido con el texto contenidoNuevoBannerNoImagen.fadeIn(200); //cambiamos la variable para permitir que se cargue la siguiente imagen activo = false; }); }).error(function (){}) //damos al elemento imagen provisional el origen de la imagen de fondo para que la cargue .attr('src', contenedorImg.find('img').attr('src')); }); } //funcion para desplazar el slider function sliderBotones() { //elementos originales del slider var elementos = jQuery('.sp_boton'); //numero de elementos en el slider numEl = elementos.length; //posicion del primer elemento del slider //tiene que ser una variable global posElActual = 0; //primer elemento del listado var elActual = jQuery('.sp_boton:first'); //id del primer elemento del listado var idElActual = jQuery('.sp_boton:first').attr('id'); function activarBotones(idElActual) { //variable que recoge el elemento activo, que la primera vez es igual al primer elemento del listado var idBotonElActivo = jQuery('#sp_botones .activo').attr('id'); var botonElActivo = jQuery('#'+idBotonElActivo); //si existe elemento activo (al cargar el slider todavía no hay elemento activo) if (botonElActivo.length == 1) { botonElActivo.children('h2').css('color','white'); Cufon.refresh(); botonElActivo.removeClass('activo'); //llamamos a la funcion que activa el nuevo elemento activarElActual(idElActual); } else { //si no hay elemento activo, simplemente activamos el primero activarElActual(idElActual); } //funcion que activa el elemento correspondiente function activarElActual(idElActual) { jQuery('#'+idElActual).children('h2').css('color','#FFCF0F'); Cufon.refresh(); jQuery('#'+idElActual).addClass('activo'); } }//activarbotones //inicializamos los botones activarBotones(idElActual); //funcion que se ejecuta como callback al hacer click en los botones para mover el slider //esta función lleva por defecto el parametro event que recoge el evento y sus propiedades //dentro de la función, el objeto $(this) recoge el propio botón sobre el que se ha hecho click function presionarBoton(event) { event.preventDefault(); //variable para recoger los elementos del slider que están animados en este momento var elAnimados = jQuery(contenedorSlider+' *:animated'); //si hay algun elemento animado en la pagina, desactivamos el click realizado if (elAnimados.length > 0) { return false; } else { var idBoton = jQuery(this).attr('id'); //esta función devuelve el id del elemento activo idElActual = jQuery(this); //comprobamos si es el primer elemento o el último para activar o desactivar los botones activarBotones(idBoton); //cargamos la imagen correspondiente al elemento que acaba de activarse //para ello extraemos el número de orden del boton que hemos pulsado posElActual = jQuery('.sp_boton').index(jQuery(this)); cargaBanner(listaBanners[posElActual]) } }//presionarboton //función para avanzar el slider jQuery('.sp_boton').bind('click.miseventos',presionarBoton); //si hacemos click en los botones paramos el autoslide elementos.bind("mouseup", function(){ contenedorBot.stopTime("disparadorslider"); }); }//sliderInterior