Question

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

我有很多拇指，这个号码来自一个文件夹。每个Thumb都可以打开一个精美的框来显示带有关联图片的幻灯片我设法做我想要的但是出现了另一个问题， 始终存在问题fancybox窗口位于div中心，而不是窗口中。 thhumbs的数量越多，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();
        }
    });         
});

这里是html：

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

这是CSS

.boite_real{
    float: left;width: 24%;
    margin-bottom: 10px;
    margin-right: 1.25%;
    position: relative;
}

.real{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    font-size: 13px;color: #3C3C3B;
    background-image: url('fond_blanc.png');
    background-repeat: repeat;
}

.boite_real:nth-child(4n+0){ margin-right: 0;}

.real div{ ont-size: 12px;line-height: 13px;margin: 5px;}

.real div div{
    margin: 0 auto;text-align: center;width: 100%;
    font-size: 13px;font-weight: 700;padding-top: 5px;
}

 .monbloc{
    position: absolute;top: 0;left: 0;
    width: 100%;
    height: 99.9999%;overflow: hidden;
    background: transparent;
 }

    .layout {
        display: table;
        height: 100%;width: 100%;
        overflow: hidden;
        text-align: center;
        *position: relative;
        overflow: hidden;
    }

    .layout-wrapper {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        *left: 0;
        *position: absolute;
        *top: 50%;
        background: rgba(255, 255, 255, 0);
        -webkit-transition: background .5s ease-out;
        -moz-transition: background .5s ease-out;
        -o-transition: background .5s ease-out;
        transition: background .5s ease-out;
    }

    .layout-wrapper:hover {background: rgba(255, 255, 255, .75);}

    .layout-content {
        display: -moz-inline-stack;
        display: inline-block;
        *display: inline;
        *left: 0;
        *position: relative;
        *zoom: 1;
        *top: -50%;
        width: 100%;
    }

    .layout-content {  display: none; }

    .layout-wrapper:hover .layout-content{ display: -moz-inline-stack;display: inline-block;}

Answer 1

对于水平放置，您可以在fancybox容器上设置以下样式，前提是它在视口的整个宽度的上下文中：

margin:0 auto;

对于垂直居中......好吧，有各种方法或多或少都有效。

This should help for centering in CSS

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

1 个答案: