jquery - example - fancybox pdf
¿Cómo puedo hacer que el contenido de texto se redimensione correctamente cuando uso Fancybox 2? (4)
¿Has intentado utilizar Flexbox? Mi referencia de referencia para este conjunto de propiedades CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Además, puede establecer valores estáticos con javascript y cambiarlos a medida que la ventana cambia de tamaño para garantizar la capacidad de respuesta. Es posible que se necesite un tiempo de espera y un intervalo para evitar que el navegador se sobrecargue al cambiar el tamaño.
Estoy creando un sitio web de una sola página en HTML5 utilizando el marco Unemántico , enlazando a divs ocultos que se muestran en Fancybox 2 y estoy teniendo problemas para que todos los diferentes tipos de contenido se ajusten correctamente.
Hay tres divs: uno que contiene texto dentro de un div que está envuelto dentro de un div oculto, por lo que puedo manipular el contenido según corresponda, uno que contiene una galería de imágenes y otro que contiene un enlace a un video de YouTube. He creado una clase oculta a la que llamo a través de CSS así:
HTML para la porción de texto:
<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">
HTML para la porción de video:
<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>
CSS:
.hidden {
overflow:hidden;
display:none;
}
Fancybox se llama dentro de las etiquetas <head> :
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",
}, {
href : "image_2.jpg",
}, {
href : "image_3.jpg"
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
Con los valores predeterminados de Fancybox 2 ( autoSize:true , autoWidth:false y autoHeight:false ), las imágenes autoHeight:false tamaño según corresponda, el video cambia de tamaño según corresponda, pero el enlace de texto toma como valor predeterminado el alto y el ancho máximo:
Si configuro autoSize y autoWidth en False, luego establezco autoHeight en True, las imágenes aún autoHeight de tamaño de la misma manera, los cuadros de texto cambian de tamaño a aproximadamente el 50% de la ventana del navegador y el video se muestra con una porción de blanco en el lado derecho :
Para ser honesto, me gusta el tamaño de los cuadros de texto en este ejemplo, y actúan de manera responsable, pero el cuadro de video es incorrecto, por lo que es un poco molesto.
Hasta ahora he intentado lo siguiente sin éxito:
- Eliminar el script
class="hidden"y reemplazarlo con inline"display:none"y luegodisplay:inline-blocken el CSS, por consejo de un amigo, pero me di cuenta de que no funcionaría; - Dándole al div oculto del texto una configuración de cuadrícula en línea con el resto del HTML, pero esto solo causó que el div se redimensionara, y no el Fancybox.
- Puedo establecer un ancho estático, pero debe ser sensible, por lo que no es aceptable para mis necesidades;
Entonces, ¿dónde voy mal? ¿Podría estar la respuesta en la configuración de autoSize:true , y agregar un em o % width a los divs que lo necesitan?
También estoy pensando en abrir un script al abrir que solo afecta los divs que necesito, pero no estoy seguro de si eso es posible. No soy un usuario de JavaScript día a día, por lo que mi conocimiento es deficiente.
¿No puedes establecer su max-width ?
En la primera imagen que tienes con el texto, ¿qué sucede si la configuras y la aplicas?
width: 100%;
max-width: 500px; /* or whatever you like */
margin: 0 auto;
left: 0;
right: 0;
al contenedor exterior blanco (o más externo) en su captura de pantalla.
Si fancybox lo está anulando, use !important .
Realmente, en este escenario, solo necesitas fancybox para cargarlo o mostrarlo, luego colocarlo verticalmente. Deberías poder centrarlo horizontalmente con unas pocas líneas de CSS. De acuerdo, no tenemos una demostración que funcione, por lo que podría faltar algo (por ejemplo, el tamaño del contenido o el desbordamiento). Pero me complacería enmendar mi respuesta si puede publicar una demostración.
Así es como estoy usando fanybox. Hay una devolución de llamada "afterShow" que puede utilizar para manipular el cuadro mostrado. No estoy seguro de usarlo con videos. ¿Puede haber otro selector de contenedores que $ (''img.fancybox-image'')? Sólo inténtalo...
jQuery(".fancybox").fancybox({
openEffect : ''none'',
closeEffect : ''none'',
padding : 0,
margin : 5,
fitToView : true,
autoScale : true,
nextEffect : ''fade'',
prevEffect : ''none'',
afterShow : function() {
var img = $(''img.fancybox-image'');
var screen = {
w : $(window).width(),
h : $(window).height(),
r : $(window).width() / $(window).height()
};
var imgDims = {
w : img.width(),
h : img.height(),
r : img.width() / img.height()
};
if(imgDims.r > screen.r) {
img.width(screen.w - 40);
img.height(Math.round((screen.w - 40) / imgDims.r));
} else {
img.height(screen.h - 40);
img.width(Math.round((screen.h - 40) * imgDims.r));
}
this.autoHeight = true;
this.autoWidth = true;
}
});
Recomiendo estudiar el uso de Unidades Viewport para el tamaño de su fuente (vh, vw, vmax, vmin, rem):