I'm trying to make photo grid from -- Infinite Scroll v3 + Masonry 4.2.0 + Bootstrap 4 Beta 3
I'm trying to setup it from last 3 days and still it is not working. what's wrong with the code?
I have copied code from example and trying to add Bootstrap into it.
but when I try to use code in my website setup and remove "Codepen Slug" it stop working and do not show loader on page end. and also image grid look only 1 col grid which should be 2 col image grid as per Bootstrap.
how to make loader image working on my website?
how to make grid look proper 2 col-6 grid?
// JavaScript/jQuery Document
$(document).ready(function() {
// jQuery methods go here...
//-------------------------------------//
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: 'none', // select none at first
columnWidth: '.grid__col-sizer',
gutter: '.grid__gutter-sizer',
percentPosition: true,
stagger: 30,
// nicer reveal transition
visibleStyle: {
transform: 'translateY(0)',
opacity: 1
},
hiddenStyle: {
transform: 'translateY(100px)',
opacity: 0
},
});
// get Masonry instance
var msnry = $grid.data('masonry');
// initial items reveal
$grid.imagesLoaded(function() {
$grid.removeClass('are-images-unloaded');
$grid.masonry('option', {
itemSelector: '.grid__item'
});
var $items = $grid.find('.grid__item');
$grid.masonry('appended', $items);
});
//-------------------------------------//
// hack CodePen to load pens as pages
//-------------------------------------//
// init Infinte Scroll
$grid.infiniteScroll({
path: '.pagination__next',
append: '.grid__item',
outlayer: msnry,
status: '.page-load-status',
});
});img {
border: 0;
}
.inc-bgia {
background-image: url(../images/1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
#inc-tags .inc-tags-active,
#inc-tags ul li a:hover {
border-bottom: 1px solid #0056b3;
color: #0056b3;
}
.inc-respo {
width: 100%;
height: auto;
}
/* reveal grid after images loaded */
.grid.are-images-unloaded {
opacity: 0;
}
/* hide by default */
.grid.are-images-unloaded .image-grid__item {
opacity: 0;
}
.page-load-status {
display: none;
/* hidden by default */
padding-top: 20px;
border-top: 1px solid #DDD;
text-align: center;
color: #777;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<div class="container mt-4">
<!-- grid -->
<div class="grid are-images-unloaded">
<div class="grid__col-sizer col-md-6"></div>
<div class="grid__gutter-sizer p-3"></div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
<div class="grid__item col-md-6 p-3">
<a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a>
</div>
</div>
<!-- loader for grid -->
<div class="page-load-status">
<div class="loader-ellips infinite-scroll-request"> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> </div>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
</div>