/*! * slideViewerPro 1.0 * Examples and documentation at: * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/ * 2009 Gian Carlo Mingati * Version: 1.0.4 (12-AUGUST-2009) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * Requires: * jQuery v1.3.2 or later * Option: * jQuery Timers plugin | plugins.jquery.com/project/timers (for autoslide mode) * */ jQuery.extend( jQuery.easing, // from the jquery.easing plugin { easeInOutExpo: function (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; } }); jQuery(function(){ jQuery("div.svwp").prepend("loading..."); //change with YOUR loader image path }); var j = 0; //se añade la propiedad sliderThumbs que mostrará las miniaturas en un slider si es true, y sino, simplemente como un listado fijo de imágenes //se añade la propiedad showButtons para mostrar u ocultar los botones del slider de las miniaturas //si sliderThumbs es false, showButtons será false también //se añade la propiedad outerTitle para manejar los títulos de las imágenes. //Cuando sea false, se utilizará como título de las imágenes el alt de las mismas. //Cuando sea true, en el html se acompañarán las imágenes de dos span, con las clases 'titulo_largo' y 'titulo_corto' //El primero será el título de la imagen grande y el segundo el título de la miniatura jQuery.fn.slideViewerPro = function(settings) { settings = jQuery.extend({ outerTitle: false, galBorderWidth: 6, thumbsTopMargin: 3, thumbsRightMargin: 3, thumbsBorderWidth: 3, showButtons: true, sliderThumbs: true, buttonsWidth: 20, galBorderColor: "#ff0000", thumbsBorderColor: "#d8d8d8", thumbsActiveBorderColor: "aqua", buttonsTextColor: "#ff0000", thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0 thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0 easeTime: 750, asTimer: 4000, thumbs: 5, thumbsPercentReduction: 12, thumbsVis: true, easeFunc: "easeInOutExpo", leftButtonInner: "-", //could be an image "" or an escaped char as "&larr"; rightButtonInner: "+", //could be an image or an escaped char as "&rarr"; autoslide: false, typo: false, typoFullOpacity: 0.9, shuffle: false }, settings); return this.each(function(){ function shuffle(a) { var i = a.size(); while (--i) { var j = Math.floor(Math.random() * (i)); var tmp = a.slice(i, i+1); a.slice(j, j+1).insertAfter(tmp); } } //si la propiedad sliderThumbs es false, la propiedad showButtons también será false //pues si no hay slider de miniaturas, no puede haber botones if (settings.sliderThumbs == false) { settings.showButtons = false; } //container es el contendor del slider identificado en la instancia de la clase var container = jQuery(this); (!settings.shuffle) ? null : shuffle(container.find("li")); container.find("img.ldrgif").remove(); container.removeClass("svwp").addClass("slideViewer"); container.attr("id", "svwp"+j); //variable para el alto de las imagenes var pictHeight = container.find("img").attr("height"); //el script utiliza el tamaño de las imágenes para calcular el ancho del slider var pictWidth = container.find("img").attr("width"); //calculamos el número de imágenes var pictEls = container.find("li").size(); //se coge el parámetro thumbs de la instancia para determinar el número de miniaturas //excepto si el número de imágenes es menor que ese parámetro; estableciento entonces como tal el número de imágenes (pictEls >= settings.thumbs) ? null : settings.thumbs = pictEls; //el ancho del contenedor del slider de imágenes grandes var slideViewerWidth = pictWidth*pictEls; //estas dos variables almacenan el tamaño de las diapositivas obtenidas mediante el escaldo de las imágenes //las sustituimos por el tamaño de las diapositivas creadas a mano //var thumbsWidth = Math.round(pictWidth*settings.thumbsPercentReduction/100); //var thumbsHeight = Math.round(pictHeight*settings.thumbsPercentReduction/100); var thumbsWidth = 51; var thumbsHeight = 48; var pos = 0; var r_enabled = true; var l_enabled = true; //establecemos el ancho del ul que contendrá el slider de las imágenes con el ancho total calculado anteriormente container.find("ul").css("width" , slideViewerWidth) //y lo envolvemos con un div que hará de máscara del slider .wrap(jQuery("
")); //añadimos al contenedor general del slider los mismos tamaños que la máscara container.css("width" , pictWidth); container.css("height" , pictHeight); //incluimos un each porque existe la posibilidad de tener varios sliders en una página container.each(function(i) { //si el parámetro typo es 'true' en la creación de la instancia, se mostrará el alt de la imagen if(settings.typo) { //para cada imagen de cada slider realizamos la siguiente función jQuery(this).find("img").each(function(z) { //el script original crea un span con el alt de cada imagen dentro del li //en este caso, coocamos el alt como título en un div con clase 'typo' e id 'slider_tit' + sufijo, dentro de un div contenedor cuyo id es 'cont_slider_tit' //jQuery(this).after(""+jQuery(this).attr("alt")+"<\/span>"); //Si la propiedad outerTitle es false, se usará el alt de cada imagen if (settings.outerTitle == false) { jQuery('#cont_slider_tit').append("
"+jQuery(this).attr("alt")+"<\/div>"); } else if (settings.outerTitle == true) { //si es falso, usaremos el span hermano con clase 'titulo_largo' de la imagen en la que nos encontramos (z) para añadir el título jQuery('#cont_slider_tit').append("
"+jQuery(this).siblings('.titulo_largo').text()+"<\/div>"); //eliminamos el span del html jQuery(this).siblings('.titulo_largo').remove(); } //si es el primer div, z = 0, cuyo contenido aparecerá en pantalla al cargar el slider, le damos opacidad 1 para que se vea //el resto solo tendrán la clase genérica typo cuya opacidad será 0, o sea, transparente if (z == 0) { jQuery('#slider_tit_'+z).css('opacity',1); } }); } //creamos el div que contendrá las miniaturas a continuación del contenedor del slider en el html jQuery(this).after("