В админку Wordpress вывожу поля Advanced Custom Fields (ACF) для заливки изображений в продукт:
array (
'key' => 'field_544a7adeaaaa0',
'label' => 'Project gallery',
'name' => 'project_gallery',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'field_544a7b0daaaa1',
'label' => 'Project image',
'name' => 'project_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'id',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => '',
'row_limit' => '',
'layout' => 'table',
'button_label' => 'Add Image',
),
Изображения заливаются и появляются в админке. Если выводить просто изображения через while ( have_rows( , они появляются, но мне нужен был слайдер. Нашёл подходящий PHP-слайдер
sachinchoolur.github.io/lightslider и начал его подключать к выводу.
Вот что получилось в коде:
jQuery(document).ready(function() {
jQuery('#MYlightSlider').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true
});
});
Этот цикл подключен к ACF и PHP-галереи:
<?php
$gallery = '';
while ( have_rows( 'project_gallery' ) ) {
the_row();
$image = get_sub_field( 'project_image' );
$size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
$thumb = wp_get_attachment_image_url( $image, $size );
$gallery .= '<li data-thumb="'.$thumb.'">';
$gallery .= wp_get_attachment_link( absint( $image ), 'project-gallery' );
}
echo strip_tags( apply_filters( 'the_content', $gallery ), '<li><img>' );
?>
Слайдер появляется только тогда, когда я сворачиваю окно браузера, либо вывожу его в первый таб. Табы организую через bootstrap:
<ul class="nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#mainxt" aria-controls="mainxt" role="tab" data-toggle="tab">Описание продукта</a></li>
<li role="presentation"><a href="#photovid" aria-controls="photovid" role="tab" data-toggle="tab"><?php echo $project_meta_fields_desc['photo-video']['label']; ?></a>
</li>
</ul>
Вот и непонятно, почему слайдер не прогружается сразу.
Проблему можно увидеть на сайте:
https://goo.gl/l7r3AI
Слайдер во второй вкладке "Фото и Видео", которая расположена в левом сайдбаре.