Javascript 如何将我的fancybox始终放在窗口的中心

我是一个老的法国菜鸟。我有一个关于Fancybox的问题。 我在javascript和编程方面的技能是新的。 谢谢你的理解

我有很多拇指，它们的数字来自文件夹。 每个拇指都可以打开一个奇特的框来显示带有相关图片的幻灯片 我想做什么就做什么，但又出现了另一个问题， fancybox窗口始终在div中居中，而不是在窗口中出现问题。 thhumb的数量越多，div就越大。 花式盒子的开口越向底部移动，直到它从窗口消失

我使用标准的Fancybox 2.1.5 js和css

谢谢你的帮助 希望我的英语足够清晰

下面是javascript:

$(document).ready(function() {
    $(".image-show").fancybox({
        padding         : 15,
        fitToView   : true,
    });

    $('.open-album').click(function(e) {
        var el, id = $(this).data('open-id');
        if(id){
            el = $('.image-show[rel=' + id + ']:eq(0)');
            e.preventDefault();
            el.click();
        }
    });         
});

<div class="boite_real">
    <div class="real"> <img src="<?php echo $image ; ?>" alt="vignette realisations" /> </div>
    <div class="monbloc">                                       
        <div class="layout">                                
             <div class="layout-wrapper">                           
                  <div class="layout-content">                      
                    <div class="texte"> 
                        <a href="#" class="open-album" aria-haspopup="true" data-open-id="album-<?php echo $valeurBoucle; ?>">  
                            <h3><?php echo $titre; ?></h3>
                        </a>
                        <p><?php  echo $texte; ?></p>
                    </div>
                  </div>
             </div>
        </div>
    </div>

    <!-- content of slideshow in display none-->
    <div id="gallery_one" style="display: none;">
        <?php
            $monfolder = "./Photos_realisations_$id";
            if(is_dir($monfolder))
            {
                $dossier = opendir($monfolder);         // j'ouvre le dossier
                $bdd_array = array();               // je créé un tableau
                while ($Fichier = readdir($dossier))    // je lis chaque élément contenu dans le dossier avec une boucle while
                {
                    if(!in_array($Fichier,array(".","..",".DS_Store"))) // si l'element lu, n'est pas l'un des éléments suivants
                    {
                        $bdd_array[] = $Fichier;    // je rajoute l'élément au tableau
                    }
                }  
                sort($bdd_array);                   // je trie mon tableau
                foreach($bdd_array as $File)            //pour chaque éléments du tableau
                {
                    $nomFichier = $File;
                    if( strstr($nomFichier, 'site'))    //Code à exécuter si la sous-chaine chaine2 est trouvée dans chaine1 
                    { 
                        $nomFichier = $File;

        ?>
                        <a  rel ="<?php echo $album; ?>" class="image-show" href="<?php echo $monfolder."/".$nomFichier; ?>"><img src="<?php echo $monfolder."/".$nomFichier; ?>" alt=""/></a>          
        <?php
                    }           // fin if  
                }               // fin foreach
                closedir($dossier); // je ferme le dossier
            }       
        ?>
    </div> <!--fin gallery_one-->
</div>

以下是html:

$(document).ready(function() {
    $(".image-show").fancybox({
        padding         : 15,
        fitToView   : true,
    });

    $('.open-album').click(function(e) {
        var el, id = $(this).data('open-id');
        if(id){
            el = $('.image-show[rel=' + id + ']:eq(0)');
            e.preventDefault();
            el.click();
        }
    });         
});

<div class="boite_real">
    <div class="real"> <img src="<?php echo $image ; ?>" alt="vignette realisations" /> </div>
    <div class="monbloc">                                       
        <div class="layout">                                
             <div class="layout-wrapper">                           
                  <div class="layout-content">                      
                    <div class="texte"> 
                        <a href="#" class="open-album" aria-haspopup="true" data-open-id="album-<?php echo $valeurBoucle; ?>">  
                            <h3><?php echo $titre; ?></h3>
                        </a>
                        <p><?php  echo $texte; ?></p>
                    </div>
                  </div>
             </div>
        </div>
    </div>

    <!-- content of slideshow in display none-->
    <div id="gallery_one" style="display: none;">
        <?php
            $monfolder = "./Photos_realisations_$id";
            if(is_dir($monfolder))
            {
                $dossier = opendir($monfolder);         // j'ouvre le dossier
                $bdd_array = array();               // je créé un tableau
                while ($Fichier = readdir($dossier))    // je lis chaque élément contenu dans le dossier avec une boucle while
                {
                    if(!in_array($Fichier,array(".","..",".DS_Store"))) // si l'element lu, n'est pas l'un des éléments suivants
                    {
                        $bdd_array[] = $Fichier;    // je rajoute l'élément au tableau
                    }
                }  
                sort($bdd_array);                   // je trie mon tableau
                foreach($bdd_array as $File)            //pour chaque éléments du tableau
                {
                    $nomFichier = $File;
                    if( strstr($nomFichier, 'site'))    //Code à exécuter si la sous-chaine chaine2 est trouvée dans chaine1 
                    { 
                        $nomFichier = $File;

        ?>
                        <a  rel ="<?php echo $album; ?>" class="image-show" href="<?php echo $monfolder."/".$nomFichier; ?>"><img src="<?php echo $monfolder."/".$nomFichier; ?>" alt=""/></a>          
        <?php
                    }           // fin if  
                }               // fin foreach
                closedir($dossier); // je ferme le dossier
            }       
        ?>
    </div> <!--fin gallery_one-->
</div>

---

对于水平放置，可以在fancybox容器上设置以下样式，前提是该容器位于视口全宽的上下文中：

margin:0 auto;

对于垂直定心。。。嗯，有各种方法或多或少都能奏效

---

请检查，水平对中没有问题。这只是垂直居中。它根据div的高度而不是窗口上的高度进行操作。在这种情况下，当你有太多的物品时，div的高度大于窗口，当你想打开fancybox时，它会在底部或窗口外打开