jQuery Fancybox & Image Frame Control

Question

أعلم أنه يمكنني استخدام خيارات الإطارات والإطار للتحكم في حجم الإطار للمحتوى المضمّن والإيفاتر ، ولكن ماذا يمكنني أن أفعل للتحكم يدويًا في حجم الإطار عند عرض الصور؟

مشكلتي هي أن لدي صورًا أريد عرضها في صندوق خيالي أفقي للغاية وليس رأسيًا ؛ يقوم Fancybox بتوسيعه ، بحيث يكون Lightbox واسعًا حقًا وليس طويلًا جدًا ، مما يعني أنه لا يمكنك رؤية الصورة على الإطلاق.

ما أحب هو أن يكون الصورة التمرير أفقياً في صندوق الضوء. (ولا ، لا يمكنني تغيير الصور).

أي أفكار؟

موقع Fancybox

Answer 1

انتهى بي الأمر مجرد اختراق Fancybox وإضافة خيار آخر للقيام بما أردت. ها هي جوهر:

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

يعمل كالسحر.

Answer 2

يمكنك فقط جعل حجم الإطار يضبط فيما يتعلق بحجم الصورة ، عن طريق تعديل CSS.

للكتابة فوق عرض وإعلانات الارتفاع الذي يخلقه البرنامج المساعد ، أضف:

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

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

وإزالة position:absolute على #fancybox-inner

Answer 3

لقد واجهت هذه المشكلة بنفسي ، وكتبت بعض التعليمات البرمجية لحل هذا لتضمين مقاطع فيديو Vimeo Iframe'd الجديدة بناءً على مقتطف موجود. سيتيح لك ذلك إضافة معلمات URL للعرض والارتفاع على أساس Fancybox على أساس Fancybox. إذا لم تضفها ، فسوف يفتح الافتراضي IFRAME مع ارتفاع 90 ٪ و 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);

لاستخدام هذا ، يمكنك استخدام ما يلي:

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

آمل أن يساعد هذا شخص ما!

Answer 4

لف الصورة في div (إذا كانت مضمنة) أو في صفحة إذا كنت تستخدم تحميل AJAX. بعد ذلك ، اضبط النمط على DIV على عرض IFRAMs الخاصة بك وقم بتعيين سمة CSS Overflow على الفائض: التمرير ؛