Lightbox effect in wordpress

Question

i have to add a pop up for images that i have in a gallery page.I've a custom post type called mgallery and i am using gallery-template like this

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

now the plugins i try to use they offer to add lightbox effect in pages how do i add this in a page that is getting data from page-template please help

Answer 1

First get Lightbox , put it in your js folder and enqueue it

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

Then in your gallery template try putting this:

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

Let me know if you have any errors. And be sure you don't have any jquery conflicts if you have other lightbox plugins.