javascript - tab - carouFredSel altura de respuesta
title of page javascript (14)
Estoy teniendo problemas de altura con mi carrusel sensible usando carouFredSel.
ya que las imágenes responden y el carrusel también está configurado para responder.
Todavía agrega la altura máxima de la imagen a la div.
Cuando mis imágenes tienen un ancho de 740 y la altura es de 960. cambia el tamaño de la imagen al ancho de respuesta para que se ajuste a la pantalla, la imagen también se vuelve a escalar para que se ajuste al ancho, pero el div todavía piensa que hay una imagen con la altura de 960.
¿Cómo resuelvo este problema?
Creo que Lars tuvo la idea correcta, si especifica un% para la altura y tiene Responsivo: verdadero habilitado, NO le está dando un porcentaje del envoltorio principal que está declarando una proporción de% de Altura a Ancho. Por lo tanto, si su control deslizante tiene 1000px de ancho en todo el ancho y desea que tenga 500px de alto a la altura de configuración de ancho completo : "50%" le dará la altura de inicio correcta y su imagen se actualizará según el tamaño de la página.
vea el código del segundo ejemplo en esta página http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php
Especificando una altura del 100% tanto para el complemento Y los elementos trabajados para mí:
$(''#carousel'').carouFredSel({
responsive: true,
width: ''100%'',
height: ''100%'',
items: {
height: ''100%''
}
});
He tenido cierto éxito con solo usar las consultas de medios CSS para establecer las dimensiones del elemento caroufredsel_wrapper, usando! Importante, como esto:
.caroufredsel_wrapper {
width: 700px !important;
height: 393px !important;
}
@media screen and (max-width: 768px){
.caroufredsel_wrapper {
width: 460px !important;
height: 258px !important;
}
}
Entonces pude deshacerme de las cosas onCreate de la respuesta anterior. También es mucho más eficaz, ya que el enlace al evento window.resize puede activar la función muchas veces al arrastrar el marco de la ventana durante un solo cambio de tamaño.
La respuesta de Pierre casi funciona, excepto que no comprueba la diapositiva más alta, sino la altura de la primera diapositiva. En mi presentación de diapositivas, la quinta diapositiva fue más alta y terminó cortándose.
Sin embargo, después de hacer modificaciones, descubrí que jugar con la configuración en el cambio de tamaño fuerza la altura correcta. Entonces, como alternativa, aquí está esa función, activando la depuración.
var carousel = $("#swiper");
carousel.carouFredSel({
width: "100%",
height: "auto",
responsive: true,
auto: true,
scroll: {
items: 1,
fx: ''scroll''
},
duration: 1000,
swipe: {
onTouch: true,
onMouse: true
},
items: {
visible: {
min: 4,
max: 4
}
},
onCreate: function () {
$(window).on(''resize'', function () {
carousel.trigger(''configuration'', [''debug'', false, true]);
}).trigger(''resize'');
}
});
Lo que funcionó para mí (incluso desde la versión 6.0.3 de mi plantilla):
Estaba estableciendo la altura: ''variable'' en ambos elementos Y opciones principales como:
$(''#foo'').carouFredSel({
responsive: true,
width: ''100%'',
height: ''variable'',
items: {
height: ''variable''
}
});
Puedo cambiar el tamaño en cualquier momento y ya no recorta el texto en los DIV, etc.
Me doy cuenta de que, el caroufredsel reponsive funciona bien, solo necesitas hacer que tu css de la imagen sea así.
.caroufredsel_wrapper ul li img{
height: auto;
max-width: 100%;
width: 100%;
}
La funcionalidad responsiva de caroufredsel solo te dará la altura de la imagen. No es necesario jquery / javascript, eso es todo.
Me encontré con este problema hace un tiempo; La única solución que encontré es cambiar el tamaño del contenedor cuando se cambia el tamaño del navegador. Hace el truco pero al pedante en mí no le gusta mucho.
Solo hice una referencia al carrusel y agregué la función onCreate :
var $carousel = $("#swiper");
$carousel.carouFredSel({
width: "100%",
height: "auto",
responsive: true,
auto: true,
scroll: { items: 1, fx: ''scroll'' },
duration: 1000,
swipe: { onTouch: true, onMouse: true },
items: { visible: { min: 4, max: 4 } },
onCreate: onCreate
});
function onCreate() {
$(window).on(''resize'', onResize).trigger(''resize'');
}
function onResize() {
// Get all the possible height values from the slides
var heights = $carousel.children().map(function() { return $(this).height(); });
// Find the max height and set it
$carousel.parent().add($carousel).height(Math.max.apply(null, heights));
}
Si aún está utilizando este complemento en 2015, es hora de seguir adelante.
La versión gratuita ya no es compatible y la versión comercial ahora es un complemento de Wordpress. Además, ¿quién necesita hackear un control deslizante para que sea sensible hoy en día?
Mi escenario es:
1) en Firefox, las imágenes en carouFredSel carousal serían receptivas, es decir, cuando cambiamos el tamaño de la ventana, la imagen se puede ajustar a un nuevo ancho y alto en caroufredsel_wrapper.
2) en Chrome, las imágenes en carrusal no se muestran. Pero cuando cambiamos el tamaño de la pantalla, aunque sea un poco, las imágenes saldrían de manera inmaterial y serían receptivas.
var $j = jQuery.noConflict();
/**
* Init media gallery. Init carousel. Init zoom.
*/
function initMediaGallery() {
...
$j(''#prod-gal'').carouFredSel({
direction : "left",
responsive : true,
width : "100%",
height : "null",
prev : ".slick-prev",
next : ".slick-next",
items : {
display : "block",
float : "left",
height : "706",
visible : 2,
start : 0
},
scroll : {
items : {
visible:
{
min: 2,
max: 2
}
},
easing : "swing",
duration : 150,
pauseOnHover : true
},
auto : {
play : false,
timeoutDuration : 2000,
},
pagination: {
container : ".pagination",
anchorBuilder : false
},
});
}
** En mi opinión, la altura de la imagen puede ser "variable" o un valor fijo, como 706, en mi caso. es solo el tamaño inicial de la pantalla completa, y cuando configuramos "responsive: ture", carouFredSel debería calcular el tamaño de todas las imágenes automáticamente. Pero ¿por qué sucede esto?
Verifique el código fuente, podemos ver en Chrome, el .caroufredsel_wrapper height = 0. Una vez que cambiemos un poco el tamaño del navegador, sería height = 706 (por ejemplo, en mi caso).
Intenté usar el evento de cambio de tamaño (como el siguiente), para establecer el tamaño inicial del envoltorio y no funciona, excepto que establezco un valor fijo, como 706. Pero si establecemos un valor fijo, siempre será esta altura.
onCreate: function () {
var self = this;
$j(window).on(''resize'', function () {
$j(self).parent().height($j(self).children().first().height());
}).trigger(''resize'');
}
Podemos depurar los js, y ver que la altura devuelta es 0 como predeterminada, incluso establecemos un valor fijo en cada imagen del elemento cuando los inicializamos.
console.log($j(self).children().first().height());
Hasta este momento, podemos suponer que al inicializar el objeto carouFredSel, carouFreSel js no puede crear la altura correctamente. Por fin, trato de hacer este cambio porque parece que carouFredSel tiene algunos ''errores'' al calcular la altura de la imagen cuando se inicia en Chrome (supongo).
<script type="text/javascript">
//jQuery(document).ready(function(){
jQuery(window).load(function(){ /* */
initMediaGallery();
});
</script>
No hacks, esto está usando los eventos personalizados en 6.2.1. Después de crear el control deslizante para la página, configure un controlador de cambio de tamaño de la ventana, y dentro de eso, para cada control deslizante obtenga la nueva altura y use el evento ''configuración'' para restablecer la altura de ese control deslizante. Finalmente desencadenar el evento ''updateSizes''. El código relevante:
var options = {
responsive: true,
height: ''auto'',
onCreate: function() { jQuery(window).on(''resize'', resizeMyslider); },
// remaining options
...
};
myslider.carouFredSel(options);
function resizeMyslider(e) {
var newHeight = 0;
// Get new height of items (be sure css isn''t setting a fixed height)
myslider.children().map(
function() {
newHeight = Math.max(newHeight, jQuery(this).height());
}
);
// Change configuration of slider
myslider.trigger(''configuration'', [''height'', newHeight + ''px'']);
// Tell slider to use new configuration height
myslider.trigger(''updateSizes'');
}
Lo ideal sería implementar el evento de cambio de tamaño de la ventana a través de un marco de tiempo de espera o solicitud, pero esto es lo básico.
Tuve este mismo problema e hice lo siguiente:
Eliminadas las líneas de 3648 a 3652, estas líneas se ven así:
if (is_number(o.items[o.d[dim]]))
{
console.log(o.d[dim]);
return o.items[o.d[dim]];
}
Y este código está dentro de la función ms_getLargestSize.
Esto solucionó el problema de altura de la lista. Para resolver la altura de la envoltura cambié de verdadero a falso el parámetro en la línea ~ 3609, la línea se ve así:
var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);
Cambiar a:
var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);
Después de esto, el control deslizante funciona bien cuando se cambia de tamaño y ya no recorta los elementos como divs.
Espero que te ayude, Rafael Angeline.
Tuve un problema en carouFredsel 6.2.0 donde la envoltura que se creó se actualizó con una altura correcta cuando se le dio la altura: ''variable'' en la configuración, pero la lista real de elementos se atascaría con la altura del primer elemento. Esto luego recortó cualquier elemento posterior que fuera más alto que el primero. El activador updateSizes no pareció hacer nada, así que lo resolví utilizando el evento onAfter;
scroll : {
onAfter : function( data ) {
var carousel_height = $(this).parents(''.caroufredsel_wrapper'').css(''height'');
$(this).css(''height'', carousel_height);
}
}
altura: ¡"auto" significa que la altura del carrusel será tan alta como el elemento más alto en el interior, incluidos los elementos no visibles también! En el modo de respuesta, solo se cambiará la altura de los elementos visibles, por lo que la altura del carrusel seguirá siendo la misma. (Ninguno de los elementos visibles no se cambiará.)
Debe usar la altura: "variable" en lugar de eso, automáticamente cambia el tamaño del carrusel dependiendo de la altura de los elementos visibles solamente.
Más para encontrar en las especificaciones: http://caroufredsel.dev7studios.com/configuration.php
Espero que esto ayude. Saludos Dirch
http://caroufredsel.dev7studios.com/examples/responsive-carousels.php el truco es hacer el ancho y la altura dentro de los elementos.
$("#foo2").carouFredSel({
responsive : true,
scroll : {
fx : "crossfade"
},
items : {
visible : 1,
width : 870,
height : "46%"
}
});
Saludos Lars
$(''#foo2'').carouFredSel({
responsive: true,
auto: true,
width: "100%",
height: "100%",
scroll: 3,
prev: ''#prev4'',
next: ''#next4'',
items: {
width: ''100%'',
height: ''100%''
}
}).trigger(''resize'');