jQuery FancyBox et Contrôle de taille d'image d'image

Question

Je sais que je peux utiliser les options Framewidth et FrameHeight pour contrôler la taille du trame pour le contenu en ligne et iframe, mais que puis-je faire pour contrôler manuellement la taille du trame lors de l'affichage d'images?

Mon problème est que j'ai des images que je veux afficher dans une boîte de fantaisie extrêmement horizontale et pas beaucoup verticalement; Fancybox l'évalente, de sorte que la Lightbox est vraiment large et pas très grande, ce qui signifie que vous ne pouvez pas vraiment voir l'image du tout.

Ce que j'aimerais, c'est que l'image fait défiler horizontalement dans la LightBox. (Et non, je ne peux pas changer les images).

Des pensées?

Site Web FancyBox

Answer 1

J'ai fini par pirater FancyBox et ajouter une autre option pour faire ce que je voulais. Voici l'essentiel:

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

Fonctionne comme un charme.

Answer 2

Vous pouvez simplement ajuster la taille du cadre par rapport à la taille de l'image, en modifiant le CSS.

Pour écraser les déclarations de largeur et de hauteur que le plugin crée, ajouter:

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

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

et enlever position:absolute sur #fancybox-inner

Answer 3

J'ai moi-même eu ce problème et j'ai écrit un code pour résoudre ce problème pour l'intégration des nouvelles vidéos Vimeo iframe'd basées sur un extrait existant que j'ai trouvé. Cela vous permettra d'ajouter des paramètres d'URL pour la largeur et la hauteur sur une base de fantaisie par FancyBox. Si vous ne les ajoutez pas, la valeur par défaut ouvrira un iframe d'une hauteur de 90% et 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);

Pour l'utiliser, vous utiliseriez ce qui suit:

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

J'espère que ça aide quelqu'un!

Answer 4

Enveloppez l'image dans un div (si son en ligne) ou dans une page si vous utilisez la charge Ajax. Ensuite, définissez le style sur la div sur la largeur de vos iframs et définissez l'attribut CSS de débordement à Overflow: Scroll;