masonry modx

Пытаюсь встроить скрипт masonry для плиточной галереи, но возникла проблема с тем что ширина рисунка задается для каждого рисунка разная и мне приходится каждый рисунок отдельно через tv выводить. Возможно ли всю папку или альбом вывести так что б чанк или сниппет сам подставлял разную ширину рисунков. Подскажите через что так можно сделать?
Виктор
Виктор
28 апреля 2015, 20:40
modx.pro
2 334
0

Комментарии: 8

Наумов Алексей
Наумов Алексей
29 апреля 2015, 08:36
0
Если проблема в том, что masonry неверно определяет ширину/высоту приток, из-за того, что у картинок не прописаны width и height, то есть решение — запуск masonry после того, как все картинки будут загружены masonry.desandro.com/appendix.html
    Виктор
    Виктор
    29 апреля 2015, 10:28
    0
    Не могу понять как вывести целый альбом а не выводить каждый рисунок отдельно
      Наумов Алексей
      Наумов Алексей
      29 апреля 2015, 10:40
      0
      Gallery, ms2Gallery, MoreGallery — дополнения для управления фотоальбомами
        Виктор
        Виктор
        29 апреля 2015, 20:44
        0
        я знаю как выводить с помощью gallery изображения, я не могу понять как связать Gallery и скрипт Masonry
    Ivan Shvindin
    Ivan Shvindin
    29 апреля 2015, 10:27
    1
    +1
    Можно делать адаптивненько через isotope без фиксированной высоты и ширины
    Вот такой вызов для бутстрапа
    <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="isotope">
        <div class="col-md-3"><img class="img-responsive" src="картинка.jpg"></div>
        <div class="col-md-3"><img class="img-responsive" src="картинка.jpg"></div>
        <div class="col-md-3"><img class="img-responsive" src="картинка.jpg"></div>
        <div class="col-md-3"><img class="img-responsive" src="картинка.jpg"></div>
      </div>
    </div>
  </div>
</div>

<script>
$(function () {
    $('.isotope').isotope({
        itemSelector: '.item',
        masonry: { columnWidth: '.col-md-3' }
    });
});
</script>
      Юрий
      Юрий
      29 апреля 2015, 14:26
      0
      Если интересно такое решение могу подсказать
        Виктор
        Виктор
        29 апреля 2015, 20:45
        0
        Конечно интересно
          Юрий
          Юрий
          30 апреля 2015, 12:11
          1
          0
          Как-то так:

          Вызов Ms2Gallery с пагинацией:

          [[!pdoPage@infiniteScroll?
	&element=`ms2Gallery`
	&loadModels=`ms2Gallery`
	&limit=`30`
	&frontend_css=`` 
	&frontend_js=``
	&cache=`1`
	&cacheTime=`3600`
	&sortdir=`ASC`
]]
          tpl.ms2Gallery.row

          <div class="item grid-sizer uk-overlay uk-overlay-hover"> 
	<a href="[[+1280x:default=`[[+url]]`]]" class="thumbnail" data-image="[[+url]]" title="[[+name]]" >
		<img class="uk-overlay-spin" rel="zoom"  src="[[+220x]]" alt="[[+name]]" title="[[+name]]" >
		<div class="uk-overlay-area uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
	</a>
</div>
          tpl.ms2Gallery.outer
          [[+rows]]
          Скрипты:

          [[MinifyX? 
    &jsSources=`
        [[++site_url]]tpl/js/jquery-1.11.1.min.js,
        [[++site_url]]tpl/js/gallery/imagesloaded.pkgd.min.js,
        [[++site_url]]tpl/js/gallery/masonry.pkgd.min.js,
        [[++site_url]]tpl/js/gallery/jquery-ias.min.js,
        [[++site_url]]tpl/js/lightbox/jquery.hammer.min.js,
        [[++site_url]]tpl/js/lightbox/jquery.tosrus.min.all.js,
        [[++site_url]]tpl/js/setting/potrfolio.js
    ` 
    &cssSources=`
        [[++site_url]]tpl/js/gallery/jquery.lazyloadxt.fadein.css,
        [[++site_url]]tpl/js/lightbox/jquery.tosrus.all.css,
        [[++site_url]]tpl/css/folio.css,
    ` 
    &minifyJs=`1` 
    &minifyCss=`1`
]]
          potrfolio.js
          $(document).ready( function() {
    $('#opacity').css( "opacity", "1" );
	// Masonry
	// initialize Masonry
	var container = document.querySelector('.container');
	var msnry = new Masonry( container, {
	// options
	itemSelector: '.item',
	//isFitWidth: true,
	//columnWidth: 220,
	columnWidth: container.querySelector('.grid-sizer'),
	gutter: 0
	});
	// load
	imagesLoaded( container, function() {
	msnry.layout();
	});
	// load
	var ias = $.ias({
	container: ".container",
	item: ".item",
	pagination: "#pagination",
	next: ".next a",
	delay: 1200
	});
	ias.on('render', function(items) {
	$(items).css({ opacity: 0 });
	});
	ias.on('rendered', function(items) {
	msnry.appended(items);
	// load
	imagesLoaded( container, function() {
	msnry.layout();
    $("#msGallery a").tosrus({
        caption: {
            add: true
        },
        keys:true,
        //keys: {close:false},
        slides: {
            scale:"fit"
        },
        wrapper: {
            onClick:"close"
        }
    });	    
	    
	});

	// load  
	});
	ias.extension(new IASSpinnerExtension({html: '<div class="ias-noneleft" style="text-align:center"><span class="spiner"><i class="uk-icon-refresh uk-icon-spin uk-icon-large white"></i></span></div>'}));
	ias.extension(new IASNoneLeftExtension({html: ''}));

	// lightbox
    $("#msGallery a").tosrus({
        caption: {
            add: true
        },
        keys:true,
        slides: {
            scale:"fit"
        },
        wrapper: {
            onClick:"close"
        }
    });	
});
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        8