Come posso ridimensionare il contenuto del testo quando si utilizza Fancybox 2?

Sto creando un sito Web di una pagina in HTML5 utilizzando il framework Unsemantic, collegando a div nascosti visualizzati in Fancybox 2 e sto riscontrando problemi nel rendere tutti i diversi tipi di contenuti da ridimensionare correttamente.Come posso ridimensionare il contenuto del testo quando si utilizza Fancybox 2?

Ci sono tre div - uno contenente testo all'interno di un div che è racchiuso all'interno di un div nascosto, quindi posso manipolare il contenuto di conseguenza, uno contenente una galleria di immagini e uno contenente un link a un video di YouTube. Ho creato una classe nascosta che io chiamo tramite CSS come così:

HTML per la porzione di testo:

<a class="fancybox" href="#bio">...blah blah blah... 
...then later on...<article class="hidden" id="bio">

HTML per la parte video:

<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>

CSS :

.hidden { 
    overflow:hidden; 
    display:none; 
}

Fancybox viene chiamato all'interno delle <head> tag:

<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 le Fancybox 2 valori predefiniti (autoSize:true, autoWidth:false e autoHeight:false), le immagini ridimensionare di conseguenza, il video viene ridimensionato di conseguenza, ma il link di testo default altezza minima e larghezza massima:

Enter image description here

Se ho impostato autoSize e autoWidth False, quindi impostare autoHeight su True, le immagini ancora ridimensionare allo stesso modo, le caselle di testo vengono ridimensionate a circa il 50% della finestra del browser, e il video viene visualizzato con una parte del bianco sul lato destro:

Enter image description here

Per essere onesti, mi piace la dimensione delle caselle di testo in questo esempio, e agiscono responsabilmente, ma il video box è sbagliato, quindi è un po 'fastidioso.

Finora ho provato quanto segue senza successo:

Rimozione del class="hidden" e la sua sostituzione con la linea "display:none" sceneggiatura e poi display:inline-block nel CSS, su consiglio di un amico, ma mi sono reso conto che non avrebbe funzionato;
Dando al testo nascosto div un'impostazione di griglia in linea con il resto dell'HTML, ma ciò ha solo causato il ridimensionamento del div e non il Fancybox.
Posso impostare una larghezza statica, ma deve essere reattivo, quindi non è accettabile per le mie esigenze;

Quindi, dove sto andando male? La risposta potrebbe essere nell'impostare autoSize:true e aggiungere uno em o % width ai div che ne hanno bisogno?

Sto anche pensando di richiamare uno script aperto che influisce solo sulle immersioni di cui ho bisogno, ma non sono sicuro che sia possibile. Non sono un utente JavaScript giorno per giorno, quindi la mia conoscenza è scarsa.

fonte

2015-07-20 tomdot

Vedo tutto tranne lo script di inizializzazione di fancybox – JFK

Ci scusiamo, l'ho aggiunto ora. – tomdot

fancybox è associato al selettore '# fancybox-gallery' ma non vede quel selettore nel codice html – JFK

Hai provato a utilizzare Flexbox? Il mio riferimento go-for per questo insieme di proprietà CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Inoltre, è possibile impostare valori statici con javascript e modificarli quando la finestra viene ridimensionata per garantire la reattività. Potrebbe essere necessario un timeout e un intervallo per evitare di stressare il browser durante il ridimensionamento.

fonte

2015-07-27 21:18:46

io consiglierei di guardare in utilizzando Viewport Unità per il dimensionamento dei caratteri (vh, vw, Vmax, Vmin, REM):

http://caniuse.com/#feat=viewport-units

http://www.sitepoint.com/new-css3-relative-font-size/

fonte

2015-08-16 20:42:44 modded

Questo è come mi sto usando fanybox . C'è un callback "afterShow" che puoi usare per manipolare la casella visualizzata. Non sono sicuro di usarlo con i video - potrebbe quindi esserci un altro selettore di contenitori di $ ('img.fancybox-image')? Prova ...

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; 
     } 
    });

fonte

2016-01-28 17:06:42 Gerfried

Non puoi impostare è max-width?

Nella prima immagine che hai con il testo, cosa succede se si imposta a che e applicare:

width: 100%; 
max-width: 500px; /* or whatever you like */ 
margin: 0 auto; 
left: 0; 
right: 0;

al bianco contenitore esterno (o esterno) nel vostro screenshot.

Se fancybox lo sovrascrive, utilizzare !important.

Davvero, in questo scenario, è necessario solo fancybox per caricarlo o visualizzarlo, quindi posizionarlo verticalmente. Dovresti essere in grado di centrarlo orizzontalmente con poche righe di CSS. Certo, non abbiamo una demo funzionante, quindi potrebbe esserci qualcosa che mi manca (come il dimensionamento del contenuto o lo straripamento). Ma sarei felice di modificare la mia risposta se puoi pubblicare una demo.

fonte

2016-04-20 18:47:55 evu

Come posso ridimensionare il contenuto del testo quando si utilizza Fancybox 2?

risposta

Problemi correlati