How to add a lightbox to class mix?

I have a question: how to add a lightbox to a photo. I've been sitting here a bit and I can not deal with it.

?php 


//Dynamic Portfolio With Shortcode

function portfolio_shortcode($atts){
    extract( shortcode_atts( array(
        'category' = ''
    ), $atts, '' ) );

    $q = new WP_Query(
        array('posts_per_page' = 50, 'post_type' = 'portfolio')
        );        


//Portfolio taxanomy query
    global $paged;
    global $post;
    $args = array(    
        'post_type' = 'portfolio',
        'paged' = $paged,
        'posts_per_page' = -1,
    );

    $portfolio = new WP_Query($args);
    if(is_array($portfolio-posts)  !empty($portfolio-posts)) {
        foreach($portfolio-posts as $gallery_post) {
            $post_taxs = wp_get_post_terms($gallery_post-ID, 'portfolio_category', array("fields" = "all"));
            if(is_array($post_taxs)  !empty($post_taxs)) {
                foreach($post_taxs as $post_tax) {
                    $portfolio_taxs[$post_tax-slug] = $post_tax-name;
                }
            }
        }
    }
?        

        !--Category Filter--

        ul class="portfolio_button_area fix"
            li class="filter portfolio_button active" data-filter="all"Pokaż wszystkie/li
            ?php foreach($portfolio_taxs as $portfolio_tax_slug = $portfolio_tax_name): ?
                li class="filter portfolio_button" data-filter=".?php echo $portfolio_tax_slug; ?"?php echo $portfolio_tax_name; ?/li
            ?php endforeach; ?
        /ul        
        !--End--



?php

   echo'div id="Container"';
    while($q-have_posts()) : $q-the_post();
        $idd = get_the_ID();
        //Get Texanmy class        
        $item_classes = '';
        $item_cats = get_the_terms($post-ID, 'portfolio_category');
        if($item_cats):
        foreach($item_cats as $item_cat) {
            $item_classes .= $item_cat-slug . ' ';
        }
        endif;




                echo'div class="mix '.$item_classes.'"'.get_the_post_thumbnail().'/div';


    endwhile;
 echo'/div';

    wp_reset_query();

}
add_shortcode('portfolio', 'portfolio_shortcode');

Topic lightbox loop custom-post-types Wordpress

Category Web


If you only need to add a "lightbox" class to each element you just need to change this :

 echo'<div class="mix '.$item_classes.'">'.get_the_post_thumbnail().'</div>';

to this :

echo'<div class="mix lightbox '.$item_classes.'">'.the_post_thumbnail('thumbnail', array('class' => 'lightbox')) .'</div>';

And if you want to add the full size image to be opened, try this :

$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
echo'<div class="mix lightbox '.$item_classes.'"><a href="' . esc_url($featured_img_url) . '">' . the_post_thumbnail('thumbnail', array('class' => 'lightbox')) .'</a></div>';

check this for all the sizes available

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.