wordpress中的灯箱效果

时间:2015-11-04 11:25:45

标签: javascript jquery html css wordpress

我必须为图库中的图片添加弹出窗口。我有一个名为mgallery的自定义帖子类型,我正在使用像这样的gallery-template

   <?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;
    ?>

现在插件我尝试使用它们提供在页面中添加灯箱效果我如何在从页面模板获取数据的页面中添加此请帮助<​​/ p>

1 个答案:

答案 0 :(得分:0)

首先获取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冲突。