0

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');
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.