Comment positionner fancybox en haut

Comment la position de la fancybox 100px de haut par défaut, c'est le centre de l'alignement.

Je crois qu'il n'est pas de l'api de paramètres pour cela. Quelqu'un peut-il m'aider à le faire sur le script lui-même.

source d'informationauteur Nizam

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

    La solution que j'ai obtenu de travail a été le style le wrapper comme ceci:

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

    Espère que cela aide!

  3. 5

    Dans fancyBox 2-je utiliser topRatio : 0ce propery déplacer fancyBox au top, alors j'ai utilisé jQuery().css() à le mettre 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');
  4. 4

    scrollTop page.

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

    Celui-ci fonctionne. Il suffit d'ajouter le style après le chargement de la fancybox css. Cela permettra d'annuler 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>

    Source

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

  6. 2

    Si vous voulez juste la position de la fancybox un peu élevé, vous pouvez utiliser ce paramètre: "topRatio", consultez le document à http://fancyapps.com/fancybox/#docs.

  7. 2
    $('.fancybox').fancybox({
    topRatio: 0, 
    afterShow: function(){
        $(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"});
    }
});
  8. 1

    J'ai modifié le code ci-dessus un petit peu. Et sa fonctionne très 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>
  9. 1

    n'y sais 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 ceci:

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

    où la marge de définir la position (px) de l'emballage (premier nombre dans le tableau est en HAUT)

  10. 1

    Si à l'aide de la V2, les dessous de la méthode d'assistance ferait l'affaire sur les appareils mobiles:

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

    Une attaque sur deux fronts d'attaque, mais en utilisant la position "fixe" par opposition à la volonté absolue de désactiver le défilement d'un arrêt de la trame de se déplacer hors de la page

    Interne CSS:

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

    fancyBox jQuery:

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

    Pour fancyBox 2.0 et, plus tard, comme mentionné dans ce doc
    http://fancyapps.com/fancybox/#docs

    marge : un Minimum d'espace entre la fenêtre et fancyBox. Elle peut être définie comme la matrice [haut de page, à droite, en bas, à gauche]. À droite et en bas les marges sont ignorés si le contenu des dimensions dépasse fenêtre d'affichage

    Entier, Array; valeur par Défaut: 20

    Exemple:

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

    Je n'ai jamais utilisé fancybox moi-même, mais il semble que vous devez définir centerOnScroll false, puis en position de la #fancybox-wrap avec css, mais vous voyez l'ajustement.

  14. 0
        //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);
}
}
});
  15. 0

    Deux problèmes possibles:

    1. Fancybox est de ne pas obtenir de position absolue ou de z-index. Solution: ajouter !important dans wrapper où la position est absolue.
    2. Div en dessous d'eux ont de la position absolue trop de positif ou de z-index. Solution: donner la position fixe ou relatif à sous les divs et les adapter ou ajouter des z-index.
  16. 0

    J'ai modifié fancybox bibliothèque

    Version: 1.3.4 (11/11/2010)

    pour la réalisation de ce travail:

    Dans le fichier jquery.fancybox.js trouver ligne:

        $.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 à le modifier:

        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,

    Tandis que la révocation de fancybox sur le sélecteur de l'option de la carte (par exemple):

    top: '100px'

    ou ce que jamais Vous voulez 🙂

    $('#fancybox-selector').fancybox({ 
top: '20px',
//transitionOut:'elsatic'
});
  17. 0

    ce beau travail 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>