Изображения не складываются в шаблон масонства?

Question

Таким образом, видимо, мои изображения не складываются друг на друга. Все они находятся в прямых горизонтальных рядах. Не уверен, что не так. Я хочу, чтобы изображения были сложены друг на друга в подходящей сетке Pinterest-like/Masonry.

Вот шорткод я использую в моем индексном файле:

echo do_shortcode('[nggallery id="1"]'); 

Вот код найден в моей Кладке файл шаблон галереи:

<?php 
    /** 
    Template Page for the gallery overview 
    Follow variables are useable : 
    $gallery : Contain all about the gallery 
    $images : Contain all images, path, title 
    $pagination : Contain the pagination content 
    You can check the content when you insert the tag <?php var_dump($variable) ?> 
    If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?> 
    **/ 
    ?> 
    <script src="/wp-includes/js/jquery/jquery.masonry.min.js" type="text/javascript">  </script> 
    <script> 
    $(function(){ 

    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
    $container.masonry({ 
itemSelector : '.box' 
    }); 
    }); 

    }); 
    </script> 
    <style> 
    .brick { 
    display: block; 
    margin: 0px 10px 15px 10px; 
    float:left; 
    /* width:250px; */ 
    height: auto; 
    } 
    </style> 
    <script> 
    jQuery(document).ready(function($) { 
    $('#wall').masonry({ 
    // options 
    itemSelector : '.brick', 
    isAnimated: true, 
    animationOptions: { 
    duration: 500, 
    easing: 'linear', 
    queue: false} 
    }); 
    </script> 
    <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?> 
    <div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>"> 
    <div id="wall"> 
    <!-- Thumbnails --> 
<?php $i = 0; ?> 
    <?php foreach ($images as $image) : ?> 
    <div class="brick"> 
    <a class="thickbox" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > 
    <?php if (!$image->hidden) { ?> 
    <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> /> 
    <?php } ?> 
    </a> 
    </div> 
    <?php if ($image->hidden) continue; ?> 
    <?php if ($gallery->columns > 0): ?> 
    <?php if ((($i + 1) % $gallery->columns) == 0): ?> 
     <br style="clear: both" /> 
    <?php endif; ?> 
<?php endif; ?> 
<?php $i++; ?> 
    <?php endforeach; ?> 
    <?php echo $pagination ?> 
    </div> 
    </div> 
    <?php endif; ?> 

Это то, что моя галерея выглядит на фактической странице :

http://steppic.com/original/896e07bdf2f759709b9ccc5f9eea9e28.png

Answer 1

Вы вызываете кладку дважды с разными параметрами.

Первое, ваш контейнер «#container» и ваши пункты «.box„:

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
$container.masonry({ 
itemSelector : '.box' 
}); 

Во втором, ваш контейнер „#wall“ и ваши пункты“.brick», и вы ушли "});" в конце вашего (документ) .ready

jQuery(document).ready(function($) { 
$('#wall').masonry({ 
// options 
itemSelector : '.brick', 
isAnimated: true, 
animationOptions: { 
duration: 500, 
easing: 'linear', 
queue: false} 
}); 
}); //this was missing 

Выберите правильный контейнер и предметы, и он должен работать

Answer 2

Я не совсем сюр e, поскольку я не знаю, предоставили ли вы полный CSS, но, возможно, он будет работать, если вы просто удалите margin: 0px 10px 15px 10px; для класса brick.
На примере страницы кладки я просто отрегулировать пример, добавив этот край к классу item, который соответствует вашему классу brick, и результат похож на скриншот: Masonry Example

Кроме того, он выглядит, как вы называете каменная кладка дважды - один раз за .container - $container.masonry({..., а второй раз для #wall - $('#wall').masonry({...
Вы можете проверить, работает ли оно так, как это было предусмотрено, когда вы удаляете маржу, как было предложено, и, возможно, также можете вызвать кладку только один раз.

Обновление: Следующая настройка вы можете попробовать это удалить height: auto; из класса brick. Я настроил пример каменной кладки путем добавления высоты: автомобиль к классу элемента: Masonry with height: auto, как вы заметите, есть некоторые проблемы нет, если настройка по высоте удаляется: Masonry without height: auto

Для справки кладки: http://masonry.desandro.com/options.html