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

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/NWqqZGWconst videos = {&nbsp; title1: "https://www.youtube.com/embed/dQw4w9WgXcQ",&nbsp; title2: "https://www.youtube.com/embed/eRBOgtp0Hac"}const modal = document.querySelector(".video-modal");document.addEventListener("click", (e) => {&nbsp; if (e.target.classList.contains("open-modal")) {&nbsp; &nbsp; 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>`;&nbsp; &nbsp; modal.classList.add("show");&nbsp; }});.open-modal {&nbsp; border: solid;&nbsp; padding: 10px;&nbsp; margin: 10px;&nbsp; cursor: pointer;}.video-modal {&nbsp; display: none;&nbsp; position: absolute;&nbsp; top: 100px;&nbsp; left: 10px;&nbsp; right: 10px;&nbsp; z-index: 100;}.video-modal.show {&nbsp; 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 ) {&nbsp; //PLZ Verify your Assets path for the script&nbsp; &nbsp; wp_enqueue_script( 'getuigenissenjs', get_stylesheet_directory_uri().'/inc/assets/js/getuigenissen.js' );&nbsp; &nbsp; ob_start();&nbsp; &nbsp; $query = new WP_Query( array(&nbsp; &nbsp; &nbsp; &nbsp; 'post_type' => 'getuigenissen',&nbsp; &nbsp; &nbsp; &nbsp; 'posts_per_page' => -1,&nbsp; &nbsp; &nbsp; &nbsp; 'order' => 'ASC',&nbsp; &nbsp; &nbsp; &nbsp; 'orderby' => 'rand',&nbsp; &nbsp; ) );&nbsp; &nbsp; if ( $query->have_posts() ) { ?>&nbsp; &nbsp; &nbsp; &nbsp; <div class="block__getuigenissen">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="getuigenissen__wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php while ( $query->have_posts() ) : $query->the_post(); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Just in case you are using an Ombed field not a URL field or simple text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //In this example We don't need Iframe formatting&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //So we get only the ACF field URL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //That's why I added false here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $videosrc=get_field('getuigenis_video',false, false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $foto= get_field('getuigenis_foto');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="getuigenis__item" style="background-image: url('<?php echo esc_url($foto['url']); ?>');">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2><?php _e( 'Getuigenissen', 'copro' ) ?></h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="getuigenis__inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="getuigenis__quote"><?php the_field('getuigenis_getuigenis'); ?></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="getuigenis__info"><?php the_field('getuigenis_naam');?>, <?php the_field('getuigenis_functie'); ?></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--I removed your modal code here-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endwhile;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wp_reset_postdata(); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="embed-responsive embed-responsive-16by9">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <iframe class="embed-responsive-item" src="" id="video"&nbsp; allowscriptaccess="always" allow="autoplay"></iframe>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; <?php $myvariable = ob_get_clean();&nbsp; &nbsp; return $myvariable;&nbsp; &nbsp; }}add_shortcode( 'getuigenissen', 'dfib_getuigenissen_shortcode' );getuigenissen.jsfunction checkYoutube(url) {&nbsp; &nbsp; var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;&nbsp; &nbsp; var matches = url.match(p);&nbsp; &nbsp; if(matches){&nbsp; &nbsp; &nbsp; &nbsp; return 'https://youtube.com/embed/'+matches[1];&nbsp; &nbsp; }&nbsp; &nbsp; return false;}&nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; var videosrc;&nbsp;&nbsp;&nbsp; &nbsp; $('.getuigenis__video').click(function() {&nbsp; &nbsp; validsrc=checkYoutube(videosrc);&nbsp; &nbsp; console.log(validsrc);&nbsp; &nbsp; });&nbsp; &nbsp; $('#myModal').on('shown.bs.modal', function (e) {&nbsp; &nbsp; $("#video").attr('src',validsrc+ "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" );&nbsp;&nbsp; &nbsp; })&nbsp; &nbsp; $('#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","");&nbsp; &nbsp; &nbsp; &nbsp; $("#video").attr('src',validsrc);&nbsp;&nbsp; &nbsp; })&nbsp;&nbsp; &nbsp; });如果文档就绪调用已被使用，那么您可以通过函数在此处更改它，例如主函数中的某个位置.js或者加载光滑.js，在文档就绪附近，您只需轻松地调用它function __videoModal()__videoModal()$(document).ready(function() {__videoModal();//other stuff});您可以在此工作演示中检查js代码