Skip to content

Instantly share code, notes, and snippets.

@amitabhaghosh197

amitabhaghosh197/isotope-infinite-scroll-1.html

Created March 12, 2018 13:16
Show Gist options
  • Save amitabhaghosh197/53604819b4d2912d7a443db8b57f3bf3 to your computer and use it in GitHub Desktop.
Save amitabhaghosh197/53604819b4d2912d7a443db8b57f3bf3 to your computer and use it in GitHub Desktop.
Download ZIP
Isotope and Infinite Scroll #isotope #jquery #jQuery #infinite-scroll #javascript
Raw
isotope-infinite-scroll-1.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Load Fonts -->
<script>
WebFontConfig = {
google: {
families: ['Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i', 'Overlock:400,400i,700,700i,900,900i']
},
custom: {
families: ['FontAwesome', 'canela_bark_bold_personal_uRg','canela_bark_personal_useRg'],
urls: ['https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css','assets/fonts/custom-fonts/custom-fonts.css']
},
};
(function(d) {
var wf = d.createElement('script'),
s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/lib/bootstrap-dropdown-hover/bootstrap-dropdownhover.min.css">
<link rel="stylesheet" href="assets/lib/slickSlideer/slick.css">
<link rel="stylesheet" href="assets/lib/slickSlideer/slick-theme.css">
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-1.4.1.js"></script>
<script>
var ADU = jQuery.noConflict();
</script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="page-wrapper">
<!-- Header -->
<header class="full-width-grid site-header">
<div class="container-fluid">
<div class="header-wrapper">
<div class="header-top">
<nav class="navbar navbar-right">
<ul class=" info-navbar-nav">
<li>
<p>[email protected]</p>
</li>
<li>
<p><i class="fa fa-mobile" aria-hidden="true"></i> 123-456 7890</p>
</li>
</ul>
<ul class="social-navbar-nav">
<li><a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
<!-- .header-top -->
<!-- Main Menu Navbar -->
<nav class="navbar header-menu-navbar">
<div class="header-navbar-wrapper">
<ul class="navbar-nav nav header-menus-left-nav">
<li><a href="">Home</a></li>
<li><a href="">Our Company</a></li>
<li><a href="">Products</a></li>
<li><a href="">Recepies</a></li>
<li><a href="">Distributor</a></li>
</ul>
<div class="logo-wrapper">
<a href="" class="logo"><img src="assets/img/adulona_logo.png"></a>
</div>
<ul class="navbar-nav nav header-menus-right-nav">
<li><a href="">Faqs</a></li>
<li><a href="">Our Brand Story</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
</nav>
<!-- header-menu-navbar -->
</div>
<!-- .header-wrapper -->
</div>
</header>
<!-- site-header -->
<section class="full-width-grid inner-pages-banner" data-parallax="scroll" data-image-src="assets/img/recepies-img.jpg" data-speed="0.2">
<span class="transparent-gradient"></span>
<div class="flex-box vertical-center justify-center heading_text">
<header class="inner-banner-header">
<h1 class="main-heading">Organic
<span class="sub-text top-sub-text">Eat Different</span>
<span class="sub-text lg-text">Live Well</span>
</h1>
</header>
</div>
</section>
<!-- Page Content Starts -->
<main class="inner-pages-content-wrapper full-width-grid">
<div class="container-fluid">
<header class="content-header full-width-grid">
<figure class="heading-img">
<img src="assets/img/recipes_icon.svg">
</figure>
<h2 class="title-text">Our Recipes</h2>
</header>
<div id="page">
<nav class="navbar receipies-filter-navbar" >
<div class="list-center-block">
<ul class="recepies-navs nav" id="RecepiesFilter">
<li><a href="javascript:void(0);" data-filter="*" class="current"> All Recepies</a></li>
<li><a href=" javascript:void(0);" data-filter=".sourdough"> Sourdough</a></li>
<li><a href=" javascript:void(0);" data-filter=".pizza"> Pizza</a></li>
<li><a href="javascript:void(0);" data-filter=".pancakes"> Pancakes</a></li>
<li><a href="javascript:void(0);" data-filter=".brownies"> Brownies</a></li>
<li><a href="javascript:void(0);" data-filter=".glutenfree"> GlutenFree</a></li>
<li><a href="javascript:void(0);" data-filter=".biscuits"> Biscuits</a></li>
<li><a href="javascript:void(0);" data-filter=".favoriteClassics"> Favorite Classics</a></li>
<li><a href="javascript:void(0);" data-filter=".noodle"> Noodle</a></li>
</ul>
</div>
</nav>
<ul class="full-width-grid recepies-container" id="RecepiesContainer">
<li class="item sourdough ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-1.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href="">All Purpose Flour</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4>All Purpose Flour</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pizza ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-2.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href="">AMERICAN-STYLE VANILLA BISCOTTI</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4>AMERICAN-STYLE VANILLA BISCOTTI</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pancakes ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-3.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Croissant French Toast</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Croissant French Toast</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item brownies ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-4.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Vanderbeek's Sourdough Bread</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Vanderbeek's Sourdough Bread</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pizza ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-5.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Milan's Pizza and Pasta</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Milan's Pizza and Pasta</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item noodle ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-6.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Veg Hakka Noodles</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Veg Hakka Noodles</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item brownies ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-7.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Coconut Flour Brownies</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Coconut Flour Brownies</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item glutenfree ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-8.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Delicious Whole Pancakes</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Delicious Whole Pancakes</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item biscuits ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-9.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Gluten-Free Cheesy Chicken Enchilada Casserole</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Gluten-Free Cheesy Chicken Enchilada Casserole</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item favoriteClassics ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-10.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Bacon-Cheddar-Chive Scones</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Bacon-Cheddar-Chive Scones</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pancakes ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-11.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> most heavenly bread</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> most heavenly bread</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pizza ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-12.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> SANDWICH RYE BREAD</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> SANDWICH RYE BREAD</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
</ul>
<div class="scroller-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="scroller-status__message infinite-scroll-last">End of Recepies</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<nav id="page_nav" class="pagination">
<a class="pagination__next" href="isotope-infinite-scroll-2.html">Next</a>
</nav>
</div>
</div><!-- container-fluid -->
</main>
<!-- content-wrapper -->
<!-- Page Content Ends -->
<footer class="site-footer full-width-grid">
<div class="moving-skyline" id="movingSkyline"></div>
<section class="footer-top">
<div class="container-fluid">
<div class="col-md-3">
<div class="content-wrapper address-col">
<header class="footer-header">
<h3>Address</h3>
</header>
<ul class="address">
<li>
<span class="inline-block icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<span class="inline-block cont">Lorem ipsum dolor sit amet,consectetur adipiscing elit</span>
</li>
<li>
<span class="inline-block icon"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<span class="inline-block cont">123 456 7890</span>
</li>
<li>
<span class="inline-block icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<span class="inline-block cont">[email protected]</span>
</li>
</ul>
<ul class="social-links">
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
</ul>
</div><!-- content-wrapper -->
</div>
<div class="col-md-3">
<div class="content-wrapper">
<header class="footer-header">
<h3>Quick Links</h3>
</header>
<ul class="quick-links">
<li><a href="">Home</a></li>
<li><a href="">Our Company</a></li>
<li><a href="">Products</a></li>
<li><a href="">Recepies</a></li>
<li><a href="">Distributor</a></li>
<li><a href="">FAQS</a></li>
<li><a href="">Brand Story</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
<!-- content-wrapper -->
</div>
<div class="col-md-3">
<div class="content-wrapper recepies-content-wrapper">
<header class="footer-header">
<h3>Recepies</h3>
</header>
<ul class="flex-box footer-receipes-gal">
<li>
<a href="">
<img src="assets/img/fr-1.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-2.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-3.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-4.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-5.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-6.jpg">
</a>
</li>
</ul>
</div><!-- content-wrapper -->
</div>
<div class="col-md-3">
<div class="content-wrapper flex-box vertical-center justify-center foot_logo_wrapper">
<div class="col-100 logo-container text-center">
<img src="assets/img/foot-logo.png">
<h3>"EAT DIFFERENT. LIVE WELL."</h3>
</div>
</div>
</div>
</div><!-- container-fluid -->
</section>
<section class="full-width-grid footer-bottom">
<div class="container-fluid text-center">
<p>Copyright © ADUNOLA 2018 | Designed by <a href="">Da Miracle</a></p>
</div>
</section>
</footer>
</div>
<!-- .page-wrapper -->
<script src="assets/js/apps.js"></script>
<script src="assets/js/models/defaultModel.js"></script>
<script src="assets/js/views/defaultViews.js"></script>
<script src="assets/js/views/all_animation_View.js"></script>
<script src="assets/js/views/Home-BannerScripts.js"></script>
<script src="assets/js/views/defaultAnimation.js"></script>
<script src="assets/js/main.js"></script>
<script>
window.viewportUnitsBuggyfill.init({
// milliseconds to delay between updates of viewport-units
// caused by orientationchange, pageshow, resize events
refreshDebounceWait: 250,
// provide hacks plugin to make the contentHack property work correctly.
hacks: window.viewportUnitsBuggyfillHacks
});
</script>
</body>
</html>
Raw
isotope-infinite-scroll-2.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Load Fonts -->
<script>
WebFontConfig = {
google: {
families: ['Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i', 'Overlock:400,400i,700,700i,900,900i']
},
custom: {
families: ['FontAwesome', 'canela_bark_bold_personal_uRg','canela_bark_personal_useRg'],
urls: ['https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css','assets/fonts/custom-fonts/custom-fonts.css']
},
};
(function(d) {
var wf = d.createElement('script'),
s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/lib/bootstrap-dropdown-hover/bootstrap-dropdownhover.min.css">
<link rel="stylesheet" href="assets/lib/slickSlideer/slick.css">
<link rel="stylesheet" href="assets/lib/slickSlideer/slick-theme.css">
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-1.4.1.js"></script>
<script>
var ADU = jQuery.noConflict();
</script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="page-wrapper">
<!-- Header -->
<header class="full-width-grid site-header">
<div class="container-fluid">
<div class="header-wrapper">
<div class="header-top">
<nav class="navbar navbar-right">
<ul class=" info-navbar-nav">
<li>
<p>[email protected]</p>
</li>
<li>
<p><i class="fa fa-mobile" aria-hidden="true"></i> 123-456 7890</p>
</li>
</ul>
<ul class="social-navbar-nav">
<li><a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
<!-- .header-top -->
<!-- Main Menu Navbar -->
<nav class="navbar header-menu-navbar">
<div class="header-navbar-wrapper">
<ul class="navbar-nav nav header-menus-left-nav">
<li><a href="">Home</a></li>
<li><a href="">Our Company</a></li>
<li><a href="">Products</a></li>
<li><a href="">Recepies</a></li>
<li><a href="">Distributor</a></li>
</ul>
<div class="logo-wrapper">
<a href="" class="logo"><img src="assets/img/adulona_logo.png"></a>
</div>
<ul class="navbar-nav nav header-menus-right-nav">
<li><a href="">Faqs</a></li>
<li><a href="">Our Brand Story</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
</nav>
<!-- header-menu-navbar -->
</div>
<!-- .header-wrapper -->
</div>
</header>
<!-- site-header -->
<section class="full-width-grid inner-pages-banner" data-parallax="scroll" data-image-src="assets/img/recepies-img.jpg" data-speed="0.2">
<span class="transparent-gradient"></span>
<div class="flex-box vertical-center justify-center heading_text">
<header class="inner-banner-header">
<h1 class="main-heading">Organic
<span class="sub-text top-sub-text">Eat Different</span>
<span class="sub-text lg-text">Live Well</span>
</h1>
</header>
</div>
</section>
<!-- Page Content Starts -->
<main class="inner-pages-content-wrapper full-width-grid">
<div class="container-fluid">
<header class="content-header full-width-grid">
<figure class="heading-img">
<img src="assets/img/recipes_icon.svg">
</figure>
<h2 class="title-text">Our Recipes</h2>
</header>
<div id="page">
<nav class="navbar receipies-filter-navbar" >
<div class="list-center-block">
<ul class="recepies-navs nav" id="RecepiesFilter">
<li><a href="javascript:void(0);" data-filter="*" class="current"> All Recepies</a></li>
<li><a href=" javascript:void(0);" data-filter=".sourdough"> Sourdough</a></li>
<li><a href=" javascript:void(0);" data-filter=".pizza"> Pizza</a></li>
<li><a href="javascript:void(0);" data-filter=".pancakes"> Pancakes</a></li>
<li><a href="javascript:void(0);" data-filter=".brownies"> Brownies</a></li>
<li><a href="javascript:void(0);" data-filter=".glutenfree"> GlutenFree</a></li>
<li><a href="javascript:void(0);" data-filter=".biscuits"> Biscuits</a></li>
<li><a href="javascript:void(0);" data-filter=".favoriteClassics"> Favorite Classics</a></li>
<li><a href="javascript:void(0);" data-filter=".noodle"> Noodle</a></li>
</ul>
</div>
</nav>
<ul class="full-width-grid recepies-container" id="RecepiesContainer">
<li class="item sourdough ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-1.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href="">Lorem Ipsum</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4>Lorem Ipsum</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pizza ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-2.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href="">Dolor Sit Amet</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4>Dolor Sit Amet</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pancakes ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-3.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Sed ut trivia</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Sed ut Trivia</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item brownies ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-4.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Lorem Ipsum Dolor</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Lorem Ipsum Dolor</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pizza ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-5.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Nilano Utoria Piazzino</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Nilano Utoria Piazzino</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item noodle ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-6.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href="">Ipsumo Loremi Dulori</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Ipsumo Loremi Dulori</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item brownies ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-7.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Dulori Sitaira Ameto</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Dulori Sitaira Ameto</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item glutenfree ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-8.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Lorem Ipsum Dolor</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Lorem Ipsum Dolor</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item biscuits ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-9.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Sed Ut Trivia</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Sed Ut Trivia</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item favoriteClassics ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-10.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Loremo Ipsino Doloro</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Loremo Ipsino Doloro</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pancakes ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-11.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Doloro Sitro Ameto</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Doloro Sitro Ameto</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
<li class="item pizza ">
<div class="receipe-grid">
<figure class="recepies-featured-image" data-bg="recep_img">
<a class="recepie-img" href=""><img src="assets/img/rp-12.jpg" class="hide" data-recep_img ></a>
<header class="content-text">
<a href=""> Lorem Sit Amet</a>
</header>
<a href="" class="overlay-content">
<div class="content--action">
<h2 class="title">Recepies</h2>
<h4> Lorem Sit Amet</h4>
</div>
</a>
</figure>
</div>
</li>
<!-- /item -->
</ul>
<div class="scroller-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="scroller-status__message infinite-scroll-last">End of Recepies</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<nav id="page_nav">
<a href=""></a>
</nav>
</div>
</div><!-- container-fluid -->
</main>
<!-- content-wrapper -->
<!-- Page Content Ends -->
<footer class="site-footer full-width-grid">
<div class="moving-skyline" id="movingSkyline"></div>
<section class="footer-top">
<div class="container-fluid">
<div class="col-md-3">
<div class="content-wrapper address-col">
<header class="footer-header">
<h3>Address</h3>
</header>
<ul class="address">
<li>
<span class="inline-block icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<span class="inline-block cont">Lorem ipsum dolor sit amet,consectetur adipiscing elit</span>
</li>
<li>
<span class="inline-block icon"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<span class="inline-block cont">123 456 7890</span>
</li>
<li>
<span class="inline-block icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<span class="inline-block cont">[email protected]</span>
</li>
</ul>
<ul class="social-links">
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
</ul>
</div><!-- content-wrapper -->
</div>
<div class="col-md-3">
<div class="content-wrapper">
<header class="footer-header">
<h3>Quick Links</h3>
</header>
<ul class="quick-links">
<li><a href="">Home</a></li>
<li><a href="">Our Company</a></li>
<li><a href="">Products</a></li>
<li><a href="">Recepies</a></li>
<li><a href="">Distributor</a></li>
<li><a href="">FAQS</a></li>
<li><a href="">Brand Story</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
<!-- content-wrapper -->
</div>
<div class="col-md-3">
<div class="content-wrapper recepies-content-wrapper">
<header class="footer-header">
<h3>Recepies</h3>
</header>
<ul class="flex-box footer-receipes-gal">
<li>
<a href="">
<img src="assets/img/fr-1.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-2.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-3.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-4.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-5.jpg">
</a>
</li>
<li>
<a href="">
<img src="assets/img/fr-6.jpg">
</a>
</li>
</ul>
</div><!-- content-wrapper -->
</div>
<div class="col-md-3">
<div class="content-wrapper flex-box vertical-center justify-center foot_logo_wrapper">
<div class="col-100 logo-container text-center">
<img src="assets/img/foot-logo.png">
<h3>"EAT DIFFERENT. LIVE WELL."</h3>
</div>
</div>
</div>
</div><!-- container-fluid -->
</section>
<section class="full-width-grid footer-bottom">
<div class="container-fluid text-center">
<p>Copyright © ADUNOLA 2018 | Designed by <a href="">Da Miracle</a></p>
</div>
</section>
</footer>
</div>
<!-- .page-wrapper -->
<script src="assets/js/apps.js"></script>
<script src="assets/js/models/defaultModel.js"></script>
<script src="assets/js/views/defaultViews.js"></script>
<script src="assets/js/views/all_animation_View.js"></script>
<script src="assets/js/views/Home-BannerScripts.js"></script>
<script src="assets/js/views/defaultAnimation.js"></script>
<script src="assets/js/main.js"></script>
<script>
window.viewportUnitsBuggyfill.init({
// milliseconds to delay between updates of viewport-units
// caused by orientationchange, pageshow, resize events
refreshDebounceWait: 250,
// provide hacks plugin to make the contentHack property work correctly.
hacks: window.viewportUnitsBuggyfillHacks
});
</script>
</body>
</html>
Raw
isotope-infinite-scroll.css
/**======================
CSS for Scroller Status, & Loading Status
**//
.scroller-status {
display: none;
padding: 20px 0;
}
.scroller-status__message {
text-align: center;
color: #777;
}
/* loader-ellips
------------------------- */
.loader-ellips {
font-size: 20px;
position: relative;
width: 4em;
height: 1em;
margin: 10px auto;
}
.loader-ellips__dot {
display: block;
width: 1em;
height: 1em;
border-radius: 0.5em;
background: #555;
position: absolute;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
left: 0;
}
.loader-ellips__dot:nth-child(3) {
left: 1.5em;
}
.loader-ellips__dot:nth-child(4) {
left: 3em;
}
@keyframes reveal {
from {
transform: scale(0.001);
}
to {
transform: scale(1);
}
}
@keyframes slide {
to {
transform: translateX(1.5em);
}
}
.loader-ellips__dot:nth-child(1) {
animation-name: reveal;
}
.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
animation-name: slide;
}
.loader-ellips__dot:nth-child(4) {
animation-name: reveal;
animation-direction: reverse;
}
Raw
isotope-infinite-scroll.js
$(document).ready(function(){
var $container = $("#RecepiesContainer");
var $FilterCont = $('#RecepiesFilter');
$container.imagesLoaded(function(){
var $grid = $container.isotope({
// Isotope options...
itemSelector: '.item',
layoutMode: 'fitRows'
});
// get Isotope instance
var iso = $grid.data('isotope');
// init Infinite Scroll
$grid.infiniteScroll({
// Infinite Scroll options...
path: '.pagination__next',
append: '.item',
outlayer: iso,
historyTitle: false,
status: '.scroller-status',
hideNav: '.pagination',
});
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
new DefaultBgImage({el:'[data-bg]'});
});
$container.on( 'last.infiniteScroll', function( event, response, path ) {
console.log( 'Loaded: ' + path );
});
});// imagesLoaded
//filter function
$FilterCont.on('click', ' a',function(event){
event.preventDefault();
$FilterCont.find(' a').removeClass('current');
ADU(this).addClass('current');
var filterValue = ADU( this ).attr('data-filter');
$container.isotope({ filter: filterValue });
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment