desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"

Home Page:https://imagesloaded.desandro.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to work with imagesLoad

yellowlabsrl opened this issue · comments

Hello guys,
i just tried most options to start imgLoad with masonry but all my test fails!
i've just followed all examples here on github and on docs but still not working.
putted on load / ready but nada.

I'm working on wordpress, custom theme based on foundation
I've also tryed to run masonry without options.

here is my last version of code:

`jQuery.noConflict()(function($) {

"use strict";

[.......]
// MASONRY LAYOUT
var $grid = $('.photo-container');
$grid.imagesLoaded(function() {
$grid.masonry({
itemSelector: '.photo',
columnWidth: 270,
isFitWidth: true,
gutter: 10,
horizontalOrder: true,
stamp: '.stamp'
});
});
`
here is the relative html:

`

					<div id="light">
						<?php $images = get_field('gallery');  if( $images ) : ?>
							<?php foreach( $images as $image ): ?>

							<a class="photo" href="<?php ...  ?>">
			           			<img src="<?php ... ?>" alt="<?php ... ?>" style="width:100%; height:auto;"/>
							</a>

					        <?php endforeach; ?>
						<?php endif; ?>
					</div>

			</div>

`

and sass:

`
// MASONRY

.photo-container {
width: 100%;
margin: 0 auto;

&::after {
	content: '';
	display: block;
	clear: both;
}

}

.photo {
float: left;
width: 270px;
margin-bottom: 10px;
}

.stamp {
@include breakpoint(medium down) {
display: none;
}
position: relative;
height: 1px;
width: 1px;
background: transparent;
}

.stamp2 {
top: 4em;
left: 500px;
}

.stamp3 {
top: 8em;
left: 800px;
}

.stamp4 {
top: 2em;
left: 1000px;
}

.stamp5 {
top: 13em;
left: 1400px;
}

.stamp6 {
top: 9.3em;
left: 2200px;
}`

thankyou in advance to anyone want to help me
Tiziano :)

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

Hello :) thankyou for your quickly response
here is my test: https://codepen.io/YellowLab/pen/vezOLd
and here is the website related pages http://www.piuluce.com/demo/beverage/

Everything looks to be in working order. Masonry is properly laying out the items. I'm not sure I see an issue.