Wie stelle ich meine Fancybox immer in die Mitte des Fensters

Question

Ich bin ein alter französischer Neuling. Ich habe eine Frage zu Fancybox. Meine Fähigkeiten in Javascript und in der Programmierung sind neu. Also vielen Dank für Ihr Verständnis

Ich habe viele Daumen, die Nummer aus einem Ordner kommen. Jeder Thumb kann eine schicke Box öffnen, um eine Diashow mit assoziierten Bildern anzuzeigen Ich schaffe es, was ich wollte, aber ein anderes Problem erschien, es gibt immer ein Problem Das fancybox Fenster zentriert sich im div und nicht im Fenster. Je größer die Anzahl der Thumbs, desto größer ist das div. Und desto mehr verschiebt sich die schicke Schachtelöffnung nach unten, bis sie aus dem Fenster verschwindet.

Ich verwende die Standard Fancybox 2.1.5 js und css

danke Also für Ihre Hilfe und hoffen, dass mein Englisch klar genug

ist

hier ist die 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(); 
     } 
    });   
}); 

hier ist die 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> 

hier ist die 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

Für horizontale Platzierung Sie die folgende Art auf dem fancybox Behälter eingestellt werden, sofern sie in einem Kontext ist, dass die gesamte Breite des Ansichtsfenster:

margin:0 auto; 

Für vertikale Zentrierung ... nun, es gibt verschiedene Methoden, die mehr oder weniger funktionieren.

This should help for centering in CSS