Понадобилось на одном проекте сделать галерею с превьюшками.
Так как это были кастомные записи, и их было много то, решил эту галерею вывести с помощью кастомных полей ACF и слайдера на основе Slick.
Для этого создал дополнительное поле для записи как Редактор WordPress
В поле добавлял обычную галерею которая есть в редакторе WordPress, а выводил её в шаблоне вывода записи, с помощью PHP-кода или через Oxygen, причем в двух местах, одна за другой (дубль). Только первому присваивал дополнительный стиль: slider-for-jq, а второму: slider-nav-jq.
И через сниппет подключил модуль Slick и прописал стили.
Вот код сниппета с готовым кодом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
// Подключаем библиотеку Slick add_action( 'wp_footer', function () { ?> <style> .slider-for-jq div.gallery, .slider-nav-jq div.gallery { display:flex; flex-direction: row; width:100%; } .slider-for-jq div.gallery { height: max-content; flex-wrap: wrap; } .slider-for-jq div.gallery figure.gallery-item, .slider-nav-jq div.gallery figure.gallery-item { margin:0 5px; } .slider-for-jq div.gallery figure { width:100%; height: max-content; } .slider-for-jq div.gallery.slick-slider figure img { height: 400px; object-fit: cover; width: 100%; } .slider-nav-jq div.gallery figure img { width:100px; height: 100px; object-fit: cover; opacity: .5; transition:all 0.3s; } .slider-nav-jq div.gallery.slick-slider figure img { width:100%; } .slider-nav-jq div.gallery figure.slick-active.slick-current img { opacity: .95; } @media only screen and (max-width: 768px) { .slider-nav-jq div.gallery figure img { height: 50px; } .slider-for-jq div.gallery.slick-slider figure img { height:auto; } } </style> <link rel="stylesheet" type="text/css" href="/wp-content/themes/for_oxygen/plugins/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="/wp-content/themes/for_oxygen/plugins/slick/slick-theme.css"/> <script type="text/javascript" src="/wp-content/themes/for_oxygen/plugins/slick/slick.min.js"></script> <script> jQuery(document).ready(function(){ // добавляем стили для галереи, чтобы она заработала jQuery('span.slider-for-jq div.gallery').addClass( 'slider-for' ); jQuery('span.slider-nav-jq div.gallery').addClass( 'slider-nav' ); //слайдр в проектах jQuery('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); jQuery('.slider-nav').slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: '.slider-for', arrows: false, dots: false, centerMode: true, focusOnSelect: true }); }); // отключение ссылок на иконках галереи jQuery('.slider-nav-jq div.gallery figure.gallery-item a').on('click', function (e) { e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику // остальной код //alert("Мы не перешли по ссылке, а вывели своё сообщение!"); }); </script> <?php } ); |
И еще один момент, для того чтобы по клику на изображение открывалось большое изображение в модальном окне - установил плагин Easy FancyBox. А для навигационных слайдов отключил автоматическое определение ссылок как фансибокс, для этого добавил стиль .slider-nav-jq .gallery-icon a в исключения:
