Блог

Хорошо, у меня есть слайдер, который отлично работает и генерирует все пользовательские изображения и текст типа post. Теперь мне нужно, чтобы при нажатии на содержимое в слайдере открывался модал с некоторым содержимым из модала и полем описания, которое я установил с помощью дополнительных пользовательских полей. Это код для компонента слайдера:

   <div id="it-list" class="container section">
     <div class="section-wrapper">
       <h3 class="widget-title"><span>2016 "IT LIST" HONOREES</span></h3>      
       <div class="slide-wrapper">
       <div class="it-list-slide">
       <?php

    wp_reset_postdata();
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'ddg-itlist',
        'numberposts' => -1,
        'orderby' => 'rand',  
    );

    $postslist = get_posts( $args );

    foreach ($postslist as $post) :  setup_postdata($post);
    $featuretitle = get_the_title($post->ID);
    $post_id    = get_the_id();
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );   
    ?>
    <div class="main-slide-div col-sm-4 center">
        <a href="#" class="modal-toggle" data-toggle="modal" data-target="#post<?php echo $post_id; ?>">
            <div class="it-list-profile-image" style="background-image: url('<?php echo $thumb['0']; ?>');"></div>
            <h4 class="it-list-profile-title"><?php echo $featuretitle; ?></h4>
            <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
            <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
        </a>
    </div><!-- end of main slide div -->

                           <!-- Modal -->
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      <div class="modal-body">
        <div class="it-list-profile">
            <div class="it-list-profile-info">
                <div class="row">
                    <div class="it-list-profile-image modal-profile-img col-xs-4 col-sm-4 col-md-5" style="background-image: url('<?php echo $thumb['0']; ?>');">
                    </div><!-- end of modal-profile-image -->
                    <div class="col-xs-8 col-sm-8 col-md-7">
                        <h1><?php echo $featuretitle; ?></h1>
                        <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
                        <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
                        <p class="itlist-profile-jobtitle"><?php the_field('description_quote'); ?></p>
                    </div><!-- end of text and logo -->
                </div><!-- end of row -->
            </div><!-- end of it-list-profile-info -->
            <div class="it-list-description">
                <p><?php the_field('description_paragraph'); ?></p>
            </div><!-- end of it-list-description --> 
        </div><!-- end of it-list profile -->
      </div><!-- end of modal body -->
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
    </div><!-- end of modal content -->
  </div><!-- end of modal dialog -->
</div><!-- end of modal -->


    <?php endforeach; ?>
</div><!-- end of it slide -->
</div><!-- end of slide wrapper -->
 

Любая помощь будет очень признательна.

Самый простой способ, который я нашел, указать другой модал для каждой записи в цикле, — это увеличить переключатель переключения данных и модальный класс, для этого вы должны использовать следующую строку непосредственно перед циклом —

 <?php $i = 0;?>
 

Затем в цикле используйте —

 <?php $i  ;?>
 

Затем для селектора целевых данных укажите что-то вроде —

 data-target='.modal<?php echo $i;?>'
 

И модальный класс как —

 class='modal modal<?php echo $i;?>'
 

Надеюсь, это поможет, и я правильно понял ваш вопрос!