source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/sommaire/sommaire_modeportailcognac.html @ 111219

Last change on this file since 111219 was 111219, checked in by real3t@…, 3 years ago

Passage en version 5.0.0 parce que ça fait quand même un gros changement de nécessiter SPIP 3.2 + Noizetiers !
Quelques correctifs :

  • Une variable qui manquait dans le redimensionnement des images du Cycloshow
  • Vraiment utiliser les noisettes dans le sommaire de la page d'accueil (oubli)
  • Meilleurs nom pour les noisettes
File size: 2.5 KB
Line 
1#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
2<script type="text/javascript">
3        CanceladjustLayout = true;
4</script>
5<main id="main" role="main"><div id="cognac_content">
6<a id="letexte"></a>
7
8#INCLURE{fond=bloc_compiler,id_conteneur=contenu/corps_sommaire_modecognac,env}
9
10[(#PLUGIN{SOCIALTAGS}|oui)<div id="socialtags"></div>]
11
12</div><!-- cognac_content --></main>
13
14[<script src="(#CHEMIN{javascript/packery.pkgd.min.js})" type="text/javascript"></script>]
15[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
16<script type="text/javascript">
17        // slider Slick
18        $(document).ready(function(){
19                $('#diaporama .slider-slick').slick({
20                  autoplay: true,
21                  pauseOnHover: true,
22                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
23                  fade: true,
24                  cssEase: 'linear',
25                  arrows: false,
26                  dots: true,
27                  centerMode: true,
28                  focusOnSelect: true
29                });
30               
31                $('#cycloshow .slider-slick').slick({
32                  autoplay: true,
33                  pauseOnHover: true,
34                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
35                  fade: true,
36                  cssEase: 'linear',
37                  arrows: true,
38                  dots: true,
39                  centerMode: true,
40                  focusOnSelect: true
41                });
42               
43                // Pour que les éventuelles vidéos soient jouées
44                // Ceci concerne la première vidéo (ou la seule)
45                var vid = $('.slider-slick').find('video');
46                if (vid.length > 0)
47                        $(vid).get(0).play();
48                //  Ceci concerne les autres vidéos
49                $('.slider-slick').on('afterChange', function(event, slick, currentSlide){
50                        var vid = $(slick.$slides[currentSlide]).find('video');
51                        if (vid.length > 0)
52                                $(vid).get(0).play();
53                });
54               
55                $('.slider-pratique').slick({
56                  dots: false,
57                  slidesToShow: [(#GET{LargeurContaineur}|div{304}|intval)],
58                  slidesToScroll: 3,
59                  infinite: true,
60                  variableWidth: true,
61                        responsive: [
62                                {
63                                  breakpoint: [(#GET{LargeurContaineur}|moins{304}|intval)],
64                                  settings: {
65                                        slidesToShow: 2,
66                                        slidesToScroll: 2,
67                                        infinite: true,
68                                        dots: true
69                                  }
70                                },
71                                {
72                                  breakpoint: 640,
73                                  settings: {
74                                        slidesToShow: 1,
75                                        slidesToScroll: 1
76                                  }
77                                }
78                          ]
79                });
80        });
81        // external js: packery.pkgd.js, imagesloaded.pkgd.js
82        // init packery after all images have loaded
83        var $grid = $('.grid').imagesLoaded( function() {
84          $grid.packery({
85                itemSelector: '.grid-item',
86                gutter: '.gutter-sizer',
87                columnWidth: '.grid-sizer',
88                percentPosition: false
89          });
90        });
91</script>
92
93#FILTRE{mini_html}
Note: See TracBrowser for help on using the repository browser.