Fatal编程技术网
  • php/
  • Php 创建光滑的滑块，带有打开模式的按钮

Php 创建光滑的滑块，带有打开模式的按钮

php jquery css wordpress

Php 创建光滑的滑块，带有打开模式的按钮,php,jquery,css,wordpress,slick.js,Php,Jquery,Css,Wordpress,Slick.js,更新（见下） 我正在创建一个带有光滑滑块的推荐滑块，但我需要在每个幻灯片中都有一个模型 我有一个自定义的帖子类型“推荐信”（英文的“getuigenissen”）有多个ACF：标题、名称、功能、图像和视频。我想在每张幻灯片上显示一个按钮，打开一个模式，视频附在特定的推荐信上。我能想到的唯一方法是为每个推荐信创建一个模态div，但我认为这会创建很多不必要的代码 PHP代码（我用一个短代码显示推荐信） 您可以使用JS创建一个模式并动态更改视频 POC： const视频={ 标题1:“https:/

更新（见下）

我正在创建一个带有光滑滑块的推荐滑块，但我需要在每个幻灯片中都有一个模型

我有一个自定义的帖子类型“推荐信”（英文的“getuigenissen”）有多个ACF：标题、名称、功能、图像和视频。我想在每张幻灯片上显示一个按钮，打开一个模式，视频附在特定的推荐信上。我能想到的唯一方法是为每个推荐信创建一个模态div，但我认为这会创建很多不必要的代码

PHP代码（我用一个短代码显示推荐信）

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

POC：

const视频={
标题1:“https://www.youtube.com/embed/dQw4w9WgXcQ",
标题2:“https://www.youtube.com/embed/eRBOgtp0Hac"
}
const modal=document.querySelector（“.video modal”）；
document.addEventListener（“单击”，（e）=>{
if（例如target.classList.contains（“打开模式”））{
modal.innerHTML=`；
modal.classList.add（“show”）；
}
});

。打开模式{
边框：实心；
填充：10px；
利润率：10px；
光标：指针；
}
.视频模式{
显示：无；
位置：绝对位置；
顶部：100px；
左：10px；
右：10px；
z指数：100；
}
.video-modal.show{
显示：块；
}


video 1
视频2

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

POC：



const视频={
标题1:“https://www.youtube.com/embed/dQw4w9WgXcQ",
标题2:“https://www.youtube.com/embed/eRBOgtp0Hac"
}
const modal=document.querySelector（“.video modal”）；
document.addEventListener（“单击”，（e）=>{
if（例如target.classList.contains（“打开模式”））{
modal.innerHTML=`；
modal.classList.add（“show”）；
}
});

。打开模式{
边框：实心；
填充：10px；
利润率：10px；
光标：指针；
}
.视频模式{
显示：无；
位置：绝对位置；
顶部：100px；
左：10px；
右：10px；
z指数：100；
}
.video-modal.show{
显示：块；
}


video 1
视频2

这是使用您的代码片段测试的代码。在这个解决方案中，比如在Matan Sanbira'Answer中，我使用data src属性来更改模态块内容。
所以我们不会在循环中生成硬编码模式。您可能正在使用支持Oembed的服务，如Youtube、Vimeo。。。但这种方法甚至可以用于自托管视频。
您只需要更改模态容器中的iFrame代码，以适应视频服务需求

php代码：


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' );


如果已经在使用document ready调用，那么您可以在main.js或加载slick.js的某个地方通过
function\uu videoModal（）
之类的函数在这里更改它，在document ready附近，您只需通过
调用它即可


您可以使用您的代码片段检查此
中的js代码。在这个解决方案中，比如在Matan Sanbira'Answer中，我使用data src属性来更改模态块内容。
所以我们不会在循环中生成硬编码模式。您可能正在使用支持Oembed的服务，如Youtube、Vimeo。。。但这种方法甚至可以用于自托管视频。
您只需要更改模态容器中的iFrame代码，以适应视频服务需求

php代码：


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' );


如果已经在使用document ready调用，那么您可以在main.js或加载slick.js的某个地方通过
function\uu videoModal（）
之类的函数在这里更改它，在document ready附近，您只需通过
调用它即可


您可以在此检查js代码
您可以创建一个模式，并使用js动态更改视频。您可以给出一些示例代码来说明如何执行此操作吗？多个是指使用包含多个视频的ACF repeater字段？您可以使用JSF创建一个模式并动态更改视频。您可以给出一些示例代码来说明如何做到这一点吗？多个是指使用包含多个视频的ACF repeater字段？这看起来像我需要的，但我如何确保他选择了链接到帖子的视频？使用这段代码，你只需要在循环中设置一个新的数据属性，该属性带有类“getuigenis__video”，看起来像（data video=“acf video”src），并向其添加另一个类“open model”，这看起来像我需要的，但是我怎样才能确保他选择了链接到帖子的视频呢？使用这段代码，你只需要在循环中设置一个新的数据属性，该属性类似于（data video=“acf video”src）的类“getuigenis\uu video”，并在其中添加另一个类“open modal”，我对它进行了一些小的调整，但我需要确保我使用了youtube上的嵌入url，而不是“监视”url。有办法解决这个问题吗？我注意到当我关闭模式时视频一直在播放，我可以在模式关闭时停止视频吗？我还看到模式背景显示在我的模式顶部，是否应该使用一些css/SCS？我添加了一个功能，验证youtube Url和我停止播放视频的缺失行…：）关于这个模式，你可以给它你正在使用的旧设计相同的类。。。如果Css希望它是一个子元素getuigenis\uuuu，那就很棘手了！你能给我看一下你的手机的屏幕截图吗？有css风格的代码吗？我们会在Vimeo上上传视频，那么我需要一种不同的方法吗？我用我的进度更新了我的问题，并链接到了demoI。我做了一些小调整，但我需要确保我使用了youtube上的嵌入url，并且不使用“观看”url。有办法解决这个问题吗？我注意到当我关闭模式时视频一直在播放，我可以在模式关闭时停止视频吗？我还看到模式背景显示在我的模式顶部，是否应该使用一些css/SCS？我添加了一个功能，验证youtube Url和我停止播放视频的缺失行…：）大约

jQuery(document).ready(function($) {
    $(window).on('resize', function() {
        prefooterHeight = $('.block__prefooter').outerHeight();
        prefooterTop = prefooterHeight / 2;
        $('.block__prefooter').css('top', prefooterTop);
    }).trigger('resize');

    $('.getuigenissen__wrapper').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 7000,
        adaptiveHeight: true,
        prevArrow: $('.arrow-prev'),
        nextArrow: $('.arrow-next'),
    });

    var videosrc;
    $('.getuigenis__video').click(function() {
        videosrc = $(this).data( "src" );
        console.log(videosrc);
        url = "https://player.vimeo.com/video/" + videosrc + "?title=0&byline=0&portrait=0";
        console.log(url);
    });

    if ( $('#myModal').hasClass('in') ) {
        $("#video").attr('src',url );
        $('html').css('overflow', 'hidden');
    } else {
        $("#video").attr('src',videosrc);
        $('html').css('overflow', 'visible');
    }
});



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' );



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); 
    }) 
    });



$(document).ready(function() {
__videoModal();
//other stuff
});