Hola a todos. estoy usando un carousel Jquery
http://sorgalla.com/projects/jcarousel/
me va bien , pero me han pedido hacer algo con ese carrousel. que cuando se haba click en un boton el carrousel cambie de tamaño y de posición
para llamar al carrousel uso esto:
Código:
jQuery('.detallegaleria').jcarousel({
wrap: 'none',
visible: 3,
scroll:1,
});
luego para cambiar el tamaño uso esto:
Código:
jQuery(document).ready(function() {
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','357px !important');
jQuery('#fullscreen').live('click', function(){
jQuery(this).text('Normal Screen');
jQuery(this).attr("id","normalscreen");
jQuery('.detallegaleria').jcarousel({
wrap: 'none',
visible: 2,
scroll:1,
});
jQuery('div.columna_galeria').css('position','');
jQuery('div.columna_galeria').css('position','absolute !important');
jQuery('div.columna_galeria').css('top','');
jQuery('div.columna_galeria').css('top','0px !important');
jQuery('.imagen_normal').css('width','507px !important');
jQuery('.imagen_normal').css('height','600px !important');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','507px !important');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('height','');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('height','600px !important');
jQuery('.jcarousel-container-horizontal').css('height','');
jQuery('.jcarousel-container-horizontal').css('height','600px !important');
})
jQuery('#normalscreen').live('click', function(){
jQuery(this).text('Full Screen');
jQuery(this).attr("id","fullscreen");
jQuery('.detallegaleria').jcarousel({
wrap: 'none',
visible: 3,
scroll:1,
});
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','357px !important');
jQuery('div.columna_galeria').css('position','');
jQuery('div.columna_galeria').css('top','');
jQuery('.imagen_normal').css('width','357px !important');
jQuery('.imagen_normal').css('height','427px !important');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('height','');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('height','427px !important');
jQuery('.jcarousel-container-horizontal').css('height','');
jQuery('.jcarousel-container-horizontal').css('height','427px !important');
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','');
jQuery('.jcarousel-skin-full2 .jcarousel-item').delay(50);
jQuery('.jcarousel-skin-full2 .jcarousel-item').css('width','357px !important');
jQuery('#mycarousel > li').css('width','357px !important');
});
});
en google hrome va mas o menos bien ya que cuando vuelve a su tamaño original se modifica nuevamente el ancho de la imagen.
en firefox e IE no van.
podrían explicarme en que estoy fallando por favor?
desde ya muchas gracias por adelantado.
Un Saludo