Controllo delle dimensioni della cornice di JQuery FancyBox e dell'immagine

Question

So che posso usare le opzioni di framewidth e frameHeight per controllare la dimensione del frame per il contenuto in linea e iFrame, ma cosa posso fare per controllare manualmente la dimensione del frame durante la visualizzazione di immagini?

Il mio problema è che ho immagini che voglio visualizzare in un fantasia che sono estremamente orizzontali e non molto verticalmente; FancyBox lo ridimensiona, in modo che Lightbox sia davvero ampio e non molto alto, il che significa che non puoi davvero vedere l'immagine.

Quello che vorrei è avere l'immagine scorrere orizzontalmente nel lightbox. (E no, non posso cambiare le immagini).

qualche idea?

Sito Web FancyBox

Answer 1

Ho finito per hackerare FancyBox e aggiungere un'altra opzione per fare quello che volevo. Ecco l'essenza:

if (opts.imgManSize) { 
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',opts.imgWidth,imagePreloader.height+20);
} else {
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',width,height);
}

...

if (opts.imgManSize) { 
  $("#fancy_content").css('overflow','auto');
}

...

if (opts.imgManSize) { 
  $('#fancy_img').css('width','auto');
}

...

$.fn.fancybox.defaults = {
   ...
   imgManSize:false,
   imgWidth:425,
   imgHeight:355,
   ...
}

Funziona come un fascino.

Answer 2

Puoi semplicemente far regolare la dimensione del frame in relazione alla dimensione dell'immagine, modificando il CSS.

Per sovrascrivere le dichiarazioni di larghezza e altezza create dal plug -in, aggiungi:

#fancybox-inner {
    width: auto!important;
    height: auto!important;
}

#fancybox-wrap{
    width: auto!important;
    height: auto!important;
}

e rimuovere position:absolute Su #fancybox-inner

Answer 3

Ho avuto questo problema da solo e ho scritto un codice per risolvere questo problema per l'incorporamento dei nuovi video di Vimeo iframe basati su uno snippet esistente che ho trovato. Ciò ti consentirà di aggiungere parametri URL per la larghezza e l'altezza su base di fantasia in base a FancyBox. Se non si aggiungono, il valore predefinito aprirà un iFrame con un'altezza del 90% e del 90%.

(function($){ 
    $(function(){
        // Fancybox: IFRAME
        var fancybox_iframe = $('.fancybox-iframe');
        if (fancybox_iframe.length > 0){
            fancybox_iframe.each(function(index){
                // Inline frame width param
                if( $(this).attr('href').match(/width=[0-9]+/i) ){
                    var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
                } else {
                    var fWidth = '90%';
                }
                // Inline frame height param
                if( $(this).attr('href').match(/height=[0-9]+/i) ){
                    var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
                } else {
                    var fHeight = '90%';
                }
                if(window.console&&window.console.log) { 
                    console.log('fWidth #'+index+': '+fWidth); 
                    console.log('fHeight #'+index+': '+fHeight); 
                }
                $(this).fancybox({
                    'titlePosition' : 'inside',
                    'type'              : 'iframe',
                    'autoScale'         : true,
                    'padding'           : '10',
                    'width'             : fWidth,
                    'height'                : fHeight,
                    'centerOnScroll'    : true
                });
            });
        }
    });
})(jQuery);

Per usare questo, useresti quanto segue:

<a href="http://player.vimeo.com/video/16429685?color=ffffff&width=800&height=450" class="fancybox-iframe" title="Citizen Schools 101">Inline Vimeo Video</a>

Spero che questo aiuti qualcuno!

Answer 4

Avvolgi l'immagine in un div (se in linea) o in una pagina se si utilizza il carico AJAX. Quindi, imposta lo stile sul Div sulla larghezza dei tuoi iFram e imposta l'attributo CSS di Overflow su Overflow: Scroll;