JQuery FancyBox & Image Frame Size Control

Question

Ich weiß, dass ich die Framebreiten- und Framehoht -Optionen verwenden kann, um die Rahmengröße für Inline- und Iframe -Inhalte zu steuern. Was kann ich jedoch tun, um die Rahmengröße beim Anzeigen von Bildern manuell zu steuern?

Mein Problem ist, dass ich Bilder habe, die ich in einer Fancy -Box anzeigen möchte, die extrem horizontal und nicht viel vertikal sind. Fancybox skaliert es, so dass die Lightbox wirklich breit und nicht sehr groß ist, was bedeutet, dass Sie das Bild überhaupt nicht wirklich sehen können.

Was ich möchte, ist, dass das Bild horizontal in der Lightbox scrollt. (Und nein, ich kann die Bilder nicht ändern).

Irgendwelche Gedanken?

Fancybox -Website

Answer 1

Am Ende hackte ich nur Fancybox und fügte eine weitere Option hinzu, um das zu tun, was ich wollte. Hier ist das Kern:

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

Klappt wunderbar.

Answer 2

Sie können einfach die Rahmengröße in Bezug auf die Größe des Bildes einstellen, indem Sie das CSS ändern.

Fügen Sie hinzu:

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

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

und entfernen position:absolute an #fancybox-inner

Answer 3

Ich hatte dieses Problem selbst und schrieb einen Code, um dies für die Einbettung der neuen Vimeo -Iframe -Videos zu lösen, die auf einem vorhandenen Snippet basieren, das ich gefunden habe. Auf diese Weise können Sie URL -Parameter für Breite und Höhe auf einer Fancybox von Fancybox 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);

Um dies zu verwenden, verwenden Sie Folgendes:

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

Answer 4

Wickeln Sie das Bild in eine DIV (falls es inline) oder in einer Seite einwickeln, wenn Sie die AJAX -Last verwenden. Setzen Sie dann den Stil auf der Div auf die Breite Ihrer IFRAMS und setzen Sie das Überlauf -CSS -Attribut auf Überlauf: Scroll;