jQuery Fancybox & Bildgrößenkontrolle

Question

Ich weiß, dass ich die frameWidth- und frameHeight-Optionen verwenden kann, um die Bildgröße für Inline- und Iframe-Inhalte zu steuern. Aber was kann ich tun, um die Bildgröße bei der Bildanzeige manuell zu steuern?

Mein Problem ist, dass ich Bilder habe, die ich in einer Fancybox anzeigen möchte, die extrem horizontal und nicht viel vertikal sind; fancybox skaliert es, so dass der Leuchtkasten wirklich breit und nicht sehr groß ist, was bedeutet, dass man das Bild überhaupt nicht sehen kann.

Was ich möchte ist das Bild horizontal im Leuchtkasten scrollen zu lassen. (Und nein, ich kann die Bilder nicht ändern).

Irgendwelche Gedanken?

FancyBox Website

Answer 1

Ich landete nur Hacken FancyBox und Hinzufügen einer anderen Option, um zu tun, was ich wollte. Hier ist das Wesentliche:

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, 
    ... 
} 

Funktioniert wie ein Charme.

Answer 2

Wickeln Sie das Bild in einem div (wenn seine inline) oder auf einer Seite, wenn Sie die Ajax-Last verwenden. Setzen Sie dann den Stil für das div auf die Breite Ihrer iframs und setzen Sie das Attribut overflow css auf overflow: scroll;

Answer 3

Sie können nur die Bildgröße in Bezug auf die Größe des Bildes anpassen, indem Sie die CSS ändern.

überschrieben werden Breite und Höhe Deklarationen das Plugin erstellt, fügen:

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

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

und entfernen position:absolute auf #fancybox-inner

Answer 4

ich dieses Problem selbst hatte, und schrieb einige Code dies die neue Vimeo zum Einbetten zu lösen IFRAME-Videos basieren auf einem vorhandenen Snippet, das ich gefunden habe. Auf diese Weise können Sie URL-Parameter für WIDTH und HEIGHT in einer Fancybox nach Fancybox-Basis hinzufügen. Wenn Sie sie nicht hinzufügen, öffnet der Standard einen IFRAME mit einer Höhe von 90% und 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); 

diese nutzen zu können, die folgende verwenden würde:

<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> 

Ich hoffe, das hilft jemand aus!