使用可打开模式的按钮创建光滑的滑块

Question

已更新（见底部）我正在创建一个带有光滑滑块的推荐滑块，但我需要在每张幻灯片中都有一个模态。我有一个自定义帖子类型“推荐”（英语为“getuigenissen”），其中包含多个ACF：标题，名称，功能，图像和视频。我想在每张幻灯片上显示一个按钮，该按钮打开一个模态，并将视频附加到该特定推荐。我能想到的唯一方法是为每个推荐创建一个modal-div，但我认为这会产生很多不必要的代码。PHP代码（我用短代码显示推荐书）function dfib_getuigenissen_shortcode( $atts ) {    ob_start();    $query = new WP_Query( array(        'post_type' => 'getuigenissen',        'posts_per_page' => -1,        'order' => 'ASC',        'orderby' => 'rand',    ) );    if ( $query->have_posts() ) { ?>        <div class="block__getuigenissen">            <div class="getuigenissen__wrapper">                <?php while ( $query->have_posts() ) : $query->the_post(); ?>                    <div class="getuigenis__item" style="background-image: url('<?php the_field('getuigenis_foto') ?>');">                        <h2><?php _e( 'Getuigenissen', 'copro' ) ?></h2>                        <div class="getuigenis__inner">                            <p class="getuigenis__quote"><?php the_field('getuigenis_getuigenis'); ?></p>                            <p class="getuigenis__info"><?php the_field('getuigenis_naam');?>, <?php the_field('getuigenis_functie'); ?></p>                            <a class="getuigenis__video" href=""><?php _e( 'Bekijk de volledige video-getuigenis', 'copro' ) ?></a>                        </div>                        <div class="getuigenis_modal">                        <div class="modal__inner">                            <?php the_field('getuigenis_video'); ?>                        </div>                    </div>                    </div>                <?php endwhile;                wp_reset_postdata(); ?>            </div>        </div>    <?php $myvariable = ob_get_clean();    return $myvariable;    }}add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );设置它的最佳方法是什么，如何打开正确的模式？

Answer 1

您可以创建一个模式并使用JS动态更改视频。

聚碳酸酯：https://codepen.io/MSanbira/pen/NWqqZGW

const videos = {

  title1: "https://www.youtube.com/embed/dQw4w9WgXcQ",

  title2: "https://www.youtube.com/embed/eRBOgtp0Hac"

}

const modal = document.querySelector(".video-modal");

document.addEventListener("click", (e) => {

  if (e.target.classList.contains("open-modal")) {

    modal.innerHTML = `<iframe width="560" height="315" src="${videos[e.target.getAttribute("data-video")]}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;

    modal.classList.add("show");

  }

});

.open-modal {

  border: solid;

  padding: 10px;

  margin: 10px;

  cursor: pointer;

}

.video-modal {

  display: none;

  position: absolute;

  top: 100px;

  left: 10px;

  right: 10px;

  z-index: 100;

}

.video-modal.show {

  display: block;

}

<div class="open-modal" data-video="title1">video 1</div>

<div class="open-modal" data-video="title2">video 2</div>

<div class="video-modal"></div>

Answer 2

这是使用您的代码段测试的代码。在这个解决方案中，就像在马坦·桑比拉的答案中一样，我使用data-src属性来更改模态块内容。因此，我们不会在循环中生成硬编码的模态。您可能正在使用支持OEMbed的服务，如优酷，维米奥...但是这种方法甚至可以在自托管视频上工作。您只需更改模式容器中的 iFrame 代码即可满足视频服务要求。

语言代码：

function dfib_getuigenissen_shortcode( $atts ) {

  //PLZ Verify your Assets path for the script

    wp_enqueue_script( 'getuigenissenjs', get_stylesheet_directory_uri().'/inc/assets/js/getuigenissen.js' );

    ob_start();

    $query = new WP_Query( array(

        'post_type' => 'getuigenissen',

        'posts_per_page' => -1,

        'order' => 'ASC',

        'orderby' => 'rand',

    ) );

    if ( $query->have_posts() ) { ?>

        <div class="block__getuigenissen">

            <div class="getuigenissen__wrapper">

                <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                    <?php 

                    //Just in case you are using an Ombed field not a URL field or simple text

                    //In this example We don't need Iframe formatting

                    //So we get only the ACF field URL

                    //That's why I added false here

                    $videosrc=get_field('getuigenis_video',false, false);

                    $foto= get_field('getuigenis_foto');

                    ?>

                    <div class="getuigenis__item" style="background-image: url('<?php echo esc_url($foto['url']); ?>');">

                        <h2><?php _e( 'Getuigenissen', 'copro' ) ?></h2>

                        <div class="getuigenis__inner">

                            <p class="getuigenis__quote"><?php the_field('getuigenis_getuigenis'); ?></p>

                            <p class="getuigenis__info"><?php the_field('getuigenis_naam');?>, <?php the_field('getuigenis_functie'); ?></p>

                            <a class="getuigenis__video" href="#" data-toggle="modal" data-src="<?php echo $videosrc ?>" data-target="#myModal"><?php _e( 'Bekijk de volledige video-getuigenis', 'copro' ) ?></a>

                        </div>

                        <!--I removed your modal code here-->

                    </div>

                <?php endwhile;

                wp_reset_postdata(); ?>

            </div>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

              <div class="modal-dialog" role="document">

                <div class="modal-content">                  

                  <div class="modal-body">

                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                      <span aria-hidden="true">&times;</span>

                    </button>        

                    <div class="embed-responsive embed-responsive-16by9">

                      <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>

                    </div>                    

                  </div>

                </div>

              </div>

            </div> 

        </div>

    <?php $myvariable = ob_get_clean();

    return $myvariable;

    }

}

add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );

getuigenissen.js

function checkYoutube(url) {

    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;

    var matches = url.match(p);

    if(matches){

        return 'https://youtube.com/embed/'+matches[1];

    }

    return false;

}

    $(document).ready(function() {

    var videosrc;  

    $('.getuigenis__video').click(function() {

    validsrc=checkYoutube(videosrc);

    console.log(validsrc);

    });

    $('#myModal').on('shown.bs.modal', function (e) {

    $("#video").attr('src',validsrc+ "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" ); 

    })

    $('#myModal').on('hide.bs.modal', function (e) {

//I forgot to add this line to stop the player

//Otherwise it's done player.stop() using Youtube Js API

$("#video").attr("src","");

        $("#video").attr('src',validsrc); 

    }) 

    });

如果文档就绪调用已被使用，那么您可以通过函数在此处更改它，例如主函数中的某个位置.js或者加载光滑.js，在文档就绪附近，您只需轻松地调用它function __videoModal()__videoModal()

$(document).ready(function() {

__videoModal();

//other stuff

});

您可以在此工作演示中检查js代码