jQuery Fancybox y control de tamaño de marco de imagen

Question

Sé que puedo usar las opciones frameWidth y frameHeight para controlar el tamaño del marco para contenido en línea y iframe, pero ¿qué puedo hacer para controlar manualmente el tamaño del marco al mostrar imágenes?

Mi problema es que tengo imágenes que quiero mostrar en un cuadro elegante que son extremadamente horizontales y poco verticales;fancybox lo escala, de modo que la caja de luz sea muy ancha y no muy alta, lo que significa que no puedes ver la imagen en absoluto.

Lo que me gustaría es que la imagen se desplace horizontalmente en la caja de luz.(Y no, no puedo cambiar las imágenes).

¿Alguna idea?

Sitio web de FancyBox

Answer 1

Terminé solo pirateando Fancybox y agregando otra opción para hacer lo que quería. Aquí está la esencia:

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

Funciona de maravilla.

Answer 2

Puede hacer que el tamaño del marco se ajuste en relación con el tamaño de la imagen, modificando el CSS.

Para sobrescribir el ancho y las declaraciones de altura que crea el complemento, agregue:

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

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

y eliminar position:absolute en #fancybox-inner

Answer 3

Yo mismo tuve este problema y escribí un código para resolverlo e incrustar los nuevos videos IFRAME de Vimeo basados ​​en un fragmento existente que encontré.Esto le permitirá agregar parámetros de URL para ANCHO y ALTO en cada caja de lujo.Si no los agrega, el valor predeterminado abrirá un IFRAME con una altura de 90% y 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);

Para usar esto, usaría lo siguiente:

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

¡Espero que ésto ayude a alguien!

Answer 4

Envuelva la imagen en un DIV (si está en línea) o en una página si está utilizando la carga AJAX. Luego, establezca el estilo en el DIV al ancho de sus iframs y establezca el atributo CSS de desbordamiento para desbordarse: desplazarse;