Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.
HTML
On crée un container dans lequel on place une balise <img>
aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».
1 2 3 4 |
<!-- Full-page carousel --> <div id="fullPageCarousel" class="full-page-carousel is-image"> <img src="" alt="" /> </div> |
jQuery avec la méthode Bind et l’événement DOMSubtreeModified
On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current
) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src
de notre image en haut de page.
On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).
1 2 3 4 5 6 7 8 9 10 |
/* * full page Carousel */ // Use 'default' view of slick carousel function switchImg(){ var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src'); $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL); } switchImg(); $('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg); |
Cas du Slick Carousel (Drupal 7)
Utiliser la méthode .bind()
sur l’événement DOMSubtreeModified
ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log()
imprime plusieurs fois l’URL récupérée).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* * full page Carousel */ // Use 'default' view of slick carousel function switchImg(slideIndex){ if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){ var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src'); $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL); } } switchImg(0); jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) { switchImg(nextSlide); }); |
SCSS
On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// // full page carousel #block-views-home-slider-block { img { display: none; } } .full-page-carousel { &.is-image { img { position: absolute; z-index: -1; top: 0; } } } |
Une alternative où l’image est placée en background-image de l’élément body
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* * full page Carousel */ // Use 'default' view of slick carousel function switchImg(slideIndex){ if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){ var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src'); $('body') .attr('style', '') .css({ 'background-image': 'url("'+ getActiveImgURL +'")', 'background-position': 'top center', 'background-repeat': 'no-repeat' }); } } switchImg(0); jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) { switchImg(nextSlide); }); |