javascript - wordpress中的灯箱效果

Question

我必须为图库页面中的图像添加一个弹出窗口。我有一个名为 mgallery 的自定义帖子类型，并且我正在使用像这样的图库模板

   <?php
            $args=array('post_type' => 'mygallery');
            $query= new WP_Query($args);                               
            while ($query-> have_posts() ) : $query->the_post()?>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 product_categories">
              <div  class="product_categories ">
                <h1 class="product_txt"><a href="<?php echo get_post_permalink() ?>"><?php the_title();?></a></h1>
              <?php the_post_thumbnail( 'full', array( 'class' => 'product_img') );?>
              </div>    
           </div>
   <?php                                
        endwhile;
    ?>

现在我尝试使用的插件提供了在页面中添加灯箱效果的功能，我如何将其添加到从页面模板获取数据的页面中，请帮忙

Answer 1

首先获取Lightbox ，将其放入您的 js 文件夹中并将其放入队列

wp_enqueue_script('lightbox', get_template_directory_uri().'/js/lightbox.js', array());

然后在您的图库模板中尝试添加以下内容:

<?php
    $args=array('post_type' => 'mygallery');
    $query= new WP_Query($args);                               
    while ($query-> have_posts() ) : $query->the_post()?>
    <?php 
        $thumbnail_id = get_post_thumbnail_id(get_the_ID());
        $thumbnail_object = get_post($thumbnail_id);
        $url = wp_get_attachment_url( $thumbnail_id );
    ?>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 product_categories">
              <div  class="product_categories ">
                <h1 class="product_txt"><a href="<?php echo get_post_permalink() ?>"><?php the_title();?></a></h1>
                <a data-lightbox="image" data-title="<?php the_title();?>" href="<?php echo esc_url($url);?>"><?php the_post_thumbnail( 'full', array( 'class' => 'product_img') );?></a>
              </div>    
           </div>
   <?php                                
       endwhile;
   ?>

如果您有任何错误，请告诉我。如果您有其他灯箱插件，请确保没有任何 jquery 冲突。