Apertura di un fancyBox con un determinato formato

Question

Qualcuno sa come posso aprire un fancyBox ridimensionabile con un determinato formato (ad esempio 16: 9)?

Answer 1

C'è anche una soluzione CSS pura. Funziona anche quando ridimensiona.

.fancybox-type-iframe .fancybox-inner{ 
    padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */ 
    height: 0 !important; 
} 

.fancybox-type-iframe .fancybox-inner .fancybox-iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Sto assumendo avevi bisogno di questo per un video visualizzato con fancybox. Da qui il css relativo agli iframe.

P.S. So che questo thread è vecchio. Ma forse qualcuno ha ancora bisogno di una soluzione.

Answer 2

AFAIK, Fancybox al momento, non supporta questo. Tuttavia, è possibile controllare la dimensione della dimensione della scatola fantasia

("#yourbox").fancybox({ 
    'width'    : 680, 
    'height'    495, 
    'showCloseButton' : false, 
    'titlePosition'  : 'inside', 
    'titleFormat'  : formatTitle 
}); 

Answer 3

Non esiste un modo nativo per ridimensionare facilmente Fancybox. Puoi fare alcuni semplici calcoli con lo schermo .una luce per aprire una Fancybox con un particolare rapporto proporzionale rispetto alla risoluzione dello schermo corrente.

var height = screen.height/4; 

$("#test").fancybox({ 
      'width' : 16/9. * height, 
      'height' : height, 
      'autoDimensions' : false 
     }); 
}); 

Answer 4

Ecco una soluzione di css pura per i popup di youtube reattivi che funziona con Fancybox 3. È scritto in scss per chiarezza, ma può essere convertito in css online se non si ha familiarità con scss.

.fancybox-slide--iframe { 

    .fancybox-content{ 
     margin: 0!important; 
     max-width: 100%; 
     width: 100%; 
     padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */ 
     height: 0 !important; 

     /* don't go full width on wide screens */ 
     @media all and (min-width: 800px) { 
      max-width: 70%; 
      width: 70%; 
      padding-top: 39.34%; /* (9/16 * 70%) -- smaller aspect ratio in percents */ 
     } 

     .fancybox-iframe{ 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
     } 

    } 
}