Добавьте карусель совы вместо миниатюр сообщений в цикл архивирования 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,
    });
Author: sokostas, 2016-12-07

2 answers

Вы можете использовать wp_localize_script(), эта функция используется для обработки переменных php в файле js.

Вы можете прочитать больше и найти все, что вам нужно здесь

Надеюсь, это поможет!

 1
Author: Benoti, 2016-12-07 19:14:11

Мне удалось решить ее самым простым способом. Данные в.

    <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
    });
});
 1
Author: sokostas, 2016-12-08 09:49:47