add imgload

web/app/themes/la_mine/functions.php

@@ -28,6 +28,12 @@
 	}
 	add_action( 'wp_footer', 'isotope' );
 
+	function imgLoad(){
+		wp_enqueue_script( 'imagesloaded.pkgd.min.js',
+		get_template_directory_uri() . '/src/assets/js/imagesloaded.pkgd.min.js', array() );
+	}
+	add_action( 'wp_footer', 'imgLoad' );
+
 	function customJs(){
 		wp_enqueue_script( 'script',
 		get_template_directory_uri() . '/src/assets/js/scripts.js', array() );
@@ -43,9 +49,6 @@
 	// }
 	// add_action('wp_enqueue_scripts', 'includedrag');
 
-
-
-
 	// ADD OPTION PAGES
 	if( function_exists('acf_add_options_page') ) {
 
@@ -196,6 +199,4 @@
 	        $labels->menu_name = 'Évenements';
 	        $labels->name_admin_bar = 'Évenements';
 	}
-
-
  ?>

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -50,12 +50,17 @@ function masonry() {
 function burger() {
   var hamburgers = document.querySelector(".hamburger");
   var nav = document.querySelector(".nav-main");
+  var $nav_li = $('.nav-main li a');
   hamburgers.addEventListener("click", function() {
     this.classList.toggle("is-active");
     nav.classList.toggle("is-active");
   });
-}
+  $nav_li.on( 'click', function() {
+    hamburgers.classList.remove('is-active');
+    nav.classList.remove('is-active');
+  });
 
+}
 
 function paralax() {
   var rellax = new Rellax('.paralax', {
@@ -64,13 +69,19 @@ function paralax() {
 }
 
 function isotope() {
+
   var $grid = $('.grid').isotope({
     percentPosition: true,
-    masonry: {
-      columnWidth: '.thumbnails'
-    },
     itemSelector: '.thumbnails',
-    stagger: 30
+    layoutMode: 'masonry',
+    masonry: {
+      columnWidth: '.thumbnails',
+    },
+  });
+
+  $('.grid').imagesLoaded().progress( function(instance, imageObj) {
+      $(imageObj.img).fadeIn(300);
+      $('.grid').isotope('layout');
   });
 
   $('.cat-list li').on( 'click', function(evt) {
@@ -99,7 +110,6 @@ function click_nav() {
 }
 
 function scrollto(){
-
   $(window).scroll(function() {
     var scroll = $(window).scrollTop();
     if (scroll >= 100) {
@@ -108,17 +118,17 @@ function scrollto(){
         $(".logo a").removeClass("reduct");
     }
   });
-
 }
 
+
 $( document ).ready(function() {
   burger();
+  click_nav();
   slides();
+  isotope();
   // masonry();
   // paralax();
-  isotope();
   // drag();
-  click_nav();
   if (window.width >= 578) {
     scrollto();
   }

web/app/themes/la_mine/src/assets/scss/components/_index.scss

@@ -2,5 +2,8 @@
 @import "thumbnails.scss";
 @import "hero.scss";
 @import "forms.scss";
-@import "_title-page.scss";
-@import "_footer.scss";
+@import "title-page.scss";
+@import "footer.scss";
+.grid img {
+   display: none;
+}

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -1,4 +1,11 @@
 .thumbnails{
+  height: auto;
+    &:not(:last-child){
+      margin-bottom: 5rem;
+    }
+  @media screen and (min-width: 992px) {
+    margin-bottom: 0rem;
+  }
     a{
         text-decoration: none;
     }

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -4,7 +4,7 @@
             &:first-of-type{
                 padding-top: 5rem;
             }
-            padding: 2.5rem 0;
+            padding: 5rem 0;
             @media screen and (min-width: 576px) {
                 &:first-of-type{
                     padding-top: 10rem;
@@ -60,6 +60,7 @@
 
             }
             &#section_asso{
+              padding-bottom: 10rem;
                 .container-fluid{
                     & > h3{
                         border: 5px solid $colorYellow;
@@ -147,7 +148,7 @@
                     }
                     & > div{
                         border:5px solid $colorRed;
-                        padding: 1rem;
+                        padding: 2rem;
                         height: calc(100% - 4rem);
                         h4{
                             font-size: 1rem;

web/app/themes/la_mine/templates/accueil.twig

@@ -42,7 +42,7 @@
 	</div>
 </section>
 
-<section id="section_MineVideo" class="row">
+<section id="section_MineVideo" class="row ">
 	<div class="container-fluid">
 		<h3>La Mine en vidéo</h3>
 		{% if post.video_la_mine  %}

web/app/themes/la_mine/templates/archive.twig

@@ -33,11 +33,12 @@
       {% if now >= end %}
         {% include 'components/thumbnails/thumbnails.twig'%}
       {% endif %}
-
     {% endfor %}
     <div class="paralax" data-rellax-speed="-5">
       <img src="{{theme.link}}/asset/images/objet_4.svg" alt="objet 4">
     </div>
   </section>
 	
+	{% include 'partial/pagination.twig'%}
+
 {% endblock %}

web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig

@@ -12,7 +12,7 @@
     <figure>
       <span class="icone_cat {{cat}}"></span>
       <div class="overflow-hidden">
-        <img src="{{ Image(item.image_event).src|resize(500,500) }}">
+        <img class="lazyload" src="{{ Image(item.image_event).src|resize(600,500) }}" data-original="{{ Image(item.image_event).src|resize(600,500) }}">
       </div>
 
       <figcaption class="wrap_content">

web/app/themes/la_mine/templates/html-header.twig

@@ -5,10 +5,10 @@
 <head>
     <meta charset="{{ site.charset }}" />
     <meta name="description" content="{{ site.description }}">
-    <link rel="stylesheet" href="{{ site.theme.link }}/dist/assets/css/index.min.css" type="text/css" media="screen" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{{ site.theme.link }}/dist/assets/css/index.min.css" type="text/css" media="screen" />
     <link rel="author" href="{{ site.theme.link }}/humans.txt" />
     <link rel="pingback" href="{{ site.pingback_url }}" />
     <link rel="profile" href="http://gmpg.org/xfn/11">