Добавьте карусель совы вместо миниатюр сообщений в цикл архивирования WordPress
Я работаю над темой Wordpress, в которой реализовано мета-поле галереи для содержимого каждого поста. Я хотел бы использовать изображения из этой галереи, чтобы добавить карусель с совой вместо миниатюры сообщения на странице архива.
Основная проблема заключается в том, что внутри моего цикла я оберну свою карусель в owl div и динамически присвою ей идентификатор, который будет связан с идентификатором текущего сообщения id="owl-archive-<?php the_ID();?>"
, поэтому он будет уникальным для каждого сообщения, которое появляется в архиве. Тогда я должен звонить также динамически функция owl-карусели в моем файле js для каждого из этих идентификаторов, и это моя проблема.
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//carousel starts
<div id="owl-archive-<?php the_ID();?>" class="owl-carousel owl-theme">
<?php foreach ($gallery_ids as $gallery_id): $gallery_image = wp_get_attachment_image_src($gallery_id,'full'); ?>
<div class="item">
<a class="noo-lightbox-item" data-lightbox-gallery="gallert_<?php the_ID()?>" href="<?php echo $gallery_image[0]?>"><?php echo wp_get_attachment_image( $gallery_id, 'full' ); ?></a>
</div>
<?php endforeach;?>
</div>
//carousel ends
}
}
Как я могу динамически вызывать свой идентификатор из owl-archive-<?php the_ID();?>
вместо #owl-archive
$("#owl-archive").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoPlay:true,
});
2 answers
Вы можете использовать wp_localize_script()
, эта функция используется для обработки переменных php в файле js.
Вы можете прочитать больше и найти все, что вам нужно здесь
Надеюсь, это поможет!
Мне удалось решить ее самым простым способом. Данные в.
<div data-archive="<?php the_ID();?>" id="owl-archive-<?php the_ID();?>"
А затем мой js
$('.owl-carousel').each(function(){
var the_id = $(this).data('archive')
$('#owl-archive-' + the_id).owlCarousel({
navigation : false,
slideSpeed : 300,
singleItem:true,
autoPlay:false,
navigation:false,
pagination:false,
lazyLoad : true,
autoHeight : true
});
});