masonry modx

Пытаюсь встроить скрипт masonry для плиточной галереи, но возникла проблема с тем что ширина рисунка задается для каждого рисунка разная и мне приходится каждый рисунок отдельно через tv выводить. Возможно ли всю папку или альбом вывести так что б чанк или сниппет сам подставлял разную ширину рисунков. Подскажите через что так можно сделать?

Виктор

28 апреля 2015, 20:40

2 890

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

Наумов Алексей

29 апреля 2015, 08:36

Если проблема в том, что masonry неверно определяет ширину/высоту приток, из-за того, что у картинок не прописаны width и height, то есть решение — запуск masonry после того, как все картинки будут загружены masonry.desandro.com/appendix.html

Виктор

29 апреля 2015, 10:28

Не могу понять как вывести целый альбом а не выводить каждый рисунок отдельно

Наумов Алексей

29 апреля 2015, 10:40

Gallery, ms2Gallery, MoreGallery — дополнения для управления фотоальбомами

Виктор

29 апреля 2015, 20:44

я знаю как выводить с помощью gallery изображения, я не могу понять как связать Gallery и скрипт Masonry

Ivan Shvindin

29 апреля 2015, 10:27

Можно делать адаптивненько через 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

Если интересно такое решение могу подсказать

Виктор

29 апреля 2015, 20:45

Конечно интересно

Юрий

30 апреля 2015, 12:11

Как-то так:

Вызов 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"
        }
    });	
});

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

masonry modx

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

Здесь упомянуты