web-dev-qa-db-fra.com

Comment positionner fancybox sur le dessus

Comment positionner la fancybox 100px du haut par défaut, elle est centrée.

Je crois qu'il n'y a pas de paramètres d'API pour cela. Quelqu'un peut-il m'aider à le faire sur le script réel.

jqueryfancybox
16
Nizam
$.fancybox({
   'width'     : 620,
   'height'    : 490,
   'speedIn'    :600,
   'speedOut'   :200,
   'onComplete': function() {
      $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
   }
});
13
ziasumo

La solution à laquelle je travaillais était de styliser l’emballage de la manière suivante:

#fancybox-wrap {
  position: absolute;
  top: 100px !important;
}

J'espère que ça aide!

21
jede

Dans fancyBox 2, j’utilise topRatio : 0, cette propriété déplace fancyBox en haut, puis j’ai utilisé jQuery().css() pour le placer où je veux. Exemple:

$("#myfancy").fancybox({
    wrapCSS     : 'fancybox-custom',
    maxWidth    : 500,
    maxHeight   : 360,
    fitToView   : false,
    width       : '85%',
    height      : '95%',
    autoSize    : false,
    openEffect  : 'fade',
    openSpeed   : 'slow',
    closeEffect : 'fade',
    modal       : true,
    closeSpeed  : 'slow',
    topRatio    : 0,
    helpers         : {
        overlay     : {
            css     : {
                'background-color' : '#fff'
            }
        }
    }
}).trigger('click');
jQuery('.fancybox-wrap').css('margin-top', '120px');
5
Javier

page de défilement.

$.fancybox({
       'width'     : 620,
       'height'    : 490,
       'speedIn'    :600,
       'speedOut'   :200,
       'onComplete': function() {
          $(document).scrollTop(0);
          $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
       }
    });
4
lqthang86

Si vous voulez juste placer la fancybox un peu haut, vous pouvez utiliser ce paramètre: "topRatio", consultez le document à l’adresse http://fancyapps.com/fancybox/#docs .

3
user510566

Celui-ci fonctionne. Il suffit d’ajouter le style après avoir chargé le css fancybox. Cela dépassera tout mouvement.

<link rel="stylesheet" type="text/css" href="../css/fancybox/jquery.fancybox-1.3.4.css" media="screen" >
<style type="text/css">div#fancybox-wrap {top:100px !important;}</style>

La source

http://groups.google.com/group/fancybox/browse_thread/thread/b874901b11414835/111301916450df93?lnk=gst&q=top#111301916450df93

3
pocketasez
$('.fancybox').fancybox({
    topRatio: 0, 
    afterShow: function(){
        $(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"});
    }
});
2
Md Toufiqul Islam

Une attaque sur deux fronts, mais en utilisant la position 'fixed' par opposition à absolute, désactivera le défilement et empêchera le cadre de quitter la page.

CSS interne:

.fancybox-wrap { position:fixed !important; top: 100px !important; };

fancyBox jQuery:

onComplete  : function(){
        $('.fancybox-wrap').css({'position':'fixed', 'top':'100px'});
    }
1
Jonathan Green

J'ai légèrement modifié le code ci-dessus. Et ça fonctionne bien pour moi.

<script type="text/javascript">
    $(document).ready(function() {
         $('a.fancybox').each(function(){
            var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
            var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
            var posTop = parseInt($(this).attr('href').match(/top=[0-9]+/i)[0].replace('top=',''));
            var posLeft = parseInt($(this).attr('href').match(/left=[0-9]+/i)[0].replace('left=',''));
            var marLeft = parseInt($(this).attr('href').match(/marleft=[0-9]+/i)[0].replace('marleft=',''));
            $(this).fancybox({'type':'iframe','transitionIn':'elastic','transitionOut':'elastic','width':fWidth,'height':fHeight,onStart: function () {
        //create a style that will position the fancy box relative to the element that clicked it.
            var leftT=posLeft;
            var topT=posTop;
            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = '.shekhar{ top: ' + topT + 'px !important; left: ' + leftT + '% !important; margin-left: -' + marLeft + 'px !important;  }';
            document.getElementsByTagName('head')[0].appendChild(style);
            $('#fancybox-wrap').addClass("shekhar");
            }
            });
      }); 
    });
</script>

HTML est ici:

<ul>
    <li><a class="fancybox" href="http://iacampaigns.co.in/fiama/WAP/index.html?iframe&width=100&height=100&top=100&left=50&marleft=200">Iframe</a></li>
    <li><a class="fancybox" href="http://iacampaigns.co.in/fiama/WAP/index.html?iframe&width=200&height=200&top=100&left=50&marleft=100">Iframe</a></li>
  </ul>
1
shekhar

Si vous utilisez V2, la méthode d'assistance ci-dessous ferait l'affaire sur les appareils mobiles:

$('.fancybox_success').fancybox({
    afterShow: function () {
        if ($portWidth <= $mobileBreakpoint) {
            $('html,body').animate({ scrollTop: 0 }, 'slow');
        }
    },...
1
Ben Sewards

ne savez pas si la version de fancybox que vous utilisez est 2.xxx, mais dans ce cas, vous pouvez définir la marge par défaut comme suit:

$("#myfancy").fancybox({
margin     : [100, 0, 20, 0],
...

où margin définit la position (px) du wrapper (le premier numéro du tableau est TOP)

1
Nereo Costacurta

Pour fancyBox 2.0 et les versions ultérieures mentionnées dans ce document http://fancyapps.com/fancybox/#docs

margin: espace minimum entre viewport et fancyBox. Peut être défini comme tableau - [en haut, à droite, en bas, à gauche]. Les marges droite et inférieure sont ignorées si les dimensions du contenu dépassent la fenêtre d'affichage.
Entier, tableau; Valeur par défaut: 20

Exemple:

$('.fc-event').fancybox({
    autoCenter: true,
    margin: [100, 0, 0, 0], // [top, right, bottom, left]
    type: 'ajax',
1
illusionist

Je n'ai jamais utilisé fancybox moi-même, mais il semble que vous deviez définir centerOnScroll sur false, puis positionner le #fancybox-wrap avec css comme bon vous semble.

0
joeynelson

ça marche bien pour moi

<script>
    $.fancybox({
       'width'     : 620,
       'height'    : 490,
       'speedIn'    :600,
       'speedOut'   :200,
                'onStart' :function()
                {

                        $("#fancybox-wrap").addClass('my_class');
                },
    });
</script>
    <style>
    .my_class{top:20px !important; }
    </style>
0
sandeep kumar

Deux problèmes possibles:

  1. Fancybox n'obtient pas la position absolue ou z-index. Solution: ajoutez !important dans l'emballage où la position est absolue.
  2. Les div en dessous ont aussi une position absolue ou un indice z positif. Solution: donnez une position fixe ou relative aux divisions inférieures et ajustez ou ajoutez un indice z négatif.
0
AaSh1010

J'ai modifié la librairie Fancybox 

Version: 1.3.4 (11/11/2010)

pour faire ce travail:

Dans le fichier jquery.fancybox.js find line:

    $.fancybox.center = function() {

dans cette étendue trouver:

     wrap
        .stop()
        .animate({
            'top' : parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)),

et changez le en:

    var topFromOptions = parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding));
    if (currentOpts.top) {
        topFromOptions = currentOpts.top;
    }
    wrap
        .stop()
        .animate({
            'top' : topFromOptions,

Lors de la révocation de l'option fancybox sur sélecteur (par exemple):

top: '100px'

ou tout ce que tu veux :)

$('#fancybox-selector').fancybox({ 
    top: '20px',
    // transitionOut:'elsatic'
});
0
Mr.TK
    //pass in the id of the link that was clicked and set the width and height for the iframe
    $.fn.fancybox_new = function (options) {
        for (i = 0; i < this.length; i++) {
            options._id = $(this[i]).attr("id");
            switch (options._id) {
                case "elementid": //set window size based on id
                    options.width = 375;
                    options.height = 190;
                    break;
            }
            $(this[i]).fancybox(options);
        }
    };

    $("a[rel*=formWin]").fancybox_new({
        onStart: function () {
            //create a style that will position the fancy box relative to the element that clicked it.
            if (this._id != "" && !$(this).hasClass(this._id)) {
                var style = document.createElement('style');
                var pos = $("#" + this._id).position();
                var mRight = parseInt($("#" + this._id).css("margin-right").replace("px")) + parseInt($("#" + this._id).css("padding-right").replace("px")) + parseInt($("#" + this._id).css("margin-left").replace("px")) + parseInt($("#" + this._id).css("padding-left").replace("px"));
                var mTop = parseInt($("#" + this._id).css("margin-top").replace("px", "")) + parseInt($("#" + this._id).css("padding-top").replace("px", "")) + parseInt($("#" + this._id).css("margin-bottom").replace("px", "")) + parseInt($("#" + this._id).css("padding-bottom").replace("px", ""));
                style.type = 'text/css';
                style.innerHTML = '.' + this._id + ' { top: ' + (pos.top + $("#" + this._id).height() + mTop) + 'px !important; right: ' + ($("body").width() - pos.left - $("#" + this._id).width() - mRight).toString() + 'px !important; left:auto !important; }';
                document.getElementsByTagName('head')[0].appendChild(style);
                $('#fancybox-wrap').addClass(this._id);
            }
        }
    });
0
Anthony R