I'm having some trouble with a isotope js. The website so you can see the real example is this one
I will try to resume the script and how I'm loading, maybe someone will notice what am I doing wrong. But the main problem is that when I load the page and the browser is in a size less then 900 px width, the images are overlapped and I dont know why.
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// store filter for each group
var filters = {};
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}/* force scrollbar */
html { overflow-y: scroll; }
body {
font-family: sans-serif;
}
/* ---- isotope ---- */
.grid {
padding-bottom:60px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 20%;
}
@media screen and (max-width: 960px) {
.grid-sizer,
.grid-item {
width: 33.33%;
}
}
@media screen and (max-width: 768px) {
.grid-sizer,
.grid-item {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.grid-sizer,
.grid-item {
width: 100%;
}
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
.image{
max-width: 100%;
margin: 0;
display: block;
}
.image:after {
clear:both;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.0);
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
-o-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
position: absolute;
top: 0;
left: 0;
text-decoration: none;
color: #fff;
}
.overlay .title {
text-align: center;
font-size: 20px;
color: rgba(0,0,0,0.0);
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
-o-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
padding:0 24px;
text-transform:uppercase;
position:relative;
}
.overlay:hover h3{
color: rgba(254,194,0,1);
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 1s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {color:rgba(254,194,0,1); left:0px; top:10px;}
50% {color:rgba(254,194,0,1); left:0px; top:0px;}
100% {color:rgba(254,194,0,1); left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {color:rgba(254,194,0,1);left:0px; top:10px;}
50% {color:rgba(254,194,0,1); left:0px; top:0px;}
100% {color:rgba(254,194,0,1);left:0px; top:0px;}
}
.overlay a{
cursor: hand;
}
.overlay p {
color: rgba(0,0,0,0.0);
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
-o-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
position: relative;
font-size:12px;
line-height:18px;
font-weight:100;
left: 0;
background-color: rgba(0,0,0,0.0);
width: 100%;
text-align:center;
margin: 0;
}
.overlay:hover{
background-color: rgba(0,0,0,0.85);
}
.overlay:hover p{
color: rgba(254,194,0,1);
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: tipos;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes tipos {
0% {color:#333; left:0px; top:20px;}
50% {color:#fff; left:0px; top:0px;}
100% {color:#fff; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes tipos {
0% {color:#333;left:0px; top:20px;}
50% {color:#fff; left:0px; top:0px;}
100% {color:#fff;left:0px; top:0px;}
}
.project-title{
display: table-cell;
vertical-align: middle;
}
.wrapper{
position: absolute;
display: table;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* text-align: center; */
line-height: 24px;
}
.button-group{
color:#FEC200;
font-size: 1.1em;
text-align:center;
}
.button-group .button{
background:transparent;
border:1px solid #fff;
font-size:0.8em;
font-weight:300;
padding: 8px 10px 8px !important;
text-transform: uppercase;
-webkit-transition-duration: 0.3s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: ease;
transition-duration: 0.3s;
transition-delay: 0s;
transition-timing-function: ease;
}
.button:hover{
cursor:hand;
border: solid 1px #FEC200 !important;
color:#FEC200;
padding: 8px 10px 8px !important;
font-weight:300;
-webkit-transition-duration: 0.3s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: ease;
transition-duration: 0.3s;
transition-delay: 0s;
transition-timing-function: ease;
}
.button-group .button:focus{
outline:0;
}
.is-checked {
cursor:hand;
border: solid 1px #FEC200 !important;
color:#FEC200;
padding: 8px 10px 8px !important;
font-weight:300;
}
.fotoproy img{
max-width:100%;
}
.fotoproy{
width:100%;
display:block;
}
.proyecto-imagen img{
border: 0px;
border-style: solid;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
max-width: 100% !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div style="padding:0 0 70px; margin:0;">
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="*">Todo</button>
<button class="button" data-filter=".branding">Identidad</button>
<button class="button" data-filter=".grafica">Gráfica</button>
<button class="button" data-filter=".website">Web</button>
<button class="button" data-filter=".video">Video</button>
</div>
</div>
<div class="grid" style="position: relative; height: 727.205px;">
<div class="grid-sizer"></div>
<div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/appole.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>
<div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/ramosrevista.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>
<div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/camaratres.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>
<div class="grid-item website grafica" style="position: absolute; left: 79.9982%; top: 0px;"><img src="http://www.mi5studio.com/imgs/thumbs/lions.jpg" class="image" alt="Ole Resultados APP"><a class="overlay" href="proyecto.php?id=21"><div class="wrapper"><div class="project-title"><h3 class="title">Amistosos Internacionales</h3><div class="description"><p class="tipo">VER PROYECTO</p></div></div></div></a></div>
</div>Looking at your code I see a few issues:
Your loading 2 different versions of jQuery, version 2.1.1, just after the body tag of your page and a second, 3.2.1 at the end of your page.
Top of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
Likewise, you're loading imagesloaded and isotope.js after the body tag of the page and then you are also loading masonry.js and a second, older version imagesloaded.js inside your plugins.js file at the end.
end of your page:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
You should remove your references to masonry and the older imagesloaded inside your plugins.js and re-arrange your javascript loading with only one jQuery script (3.2.1). I'm guessing that the 2 versions of jQuery and imagesloaded and having both masonry and isotope loading may be an issue?