Javascript wordpress中的灯箱效应

我必须为图库页面中的图像添加一个弹出窗口。我有一个名为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;
    ?>

现在我尝试使用的插件提供了在页面中添加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;
   ?>

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

首先获取，将其放入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;
   ?>

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