Wordpress theme lightbox thumbnail

Question

So, I basically have this piece of code within my wordpress theme which creates a container for an image from the gallery that has 2 icons on top of it as overlay. First icon is the lightbox gallery icon, which is the one I'm interested in, the other is a like button.

What I'm trying to do is eliminate the buttons for the lightbox and like, and have the entire thumbnail use lightbox instead of redirecting to the project page.

I've tried changing the href for the image that links to the project page to load lightbox instead but failed.

If you have any idea how to do that, please let me know!

$html .=" " . $masonry_size;
            $html .="'>";

            $html .= "<div class='image_holder'>";
            $html .= "<a class='portfolio_link_for_touch' href='".$portfolio_link."' target='".$target."'>";
            $html .= "<span class='image'>";
            $html .= get_the_post_thumbnail(get_the_ID(), $image_size);
            $html .= "</span>"; //close span.image
            $html .= "</a>"; //close a.portfolio_link_for_touch

            $html .= "<span class='text_holder'>";
            $html .= "<span class='text_outer'>";
            $html .= "<span class='text_inner'>";
            $html .= '<div class="hover_feature_holder_title">';
            $html .= '<div class="hover_feature_holder_title_inner">';
            $html .= '<'.$title_tag.' '.$title_styles.' class="portfolio_title"><a href="' . $portfolio_link . '" '.$title_styles.' target="'.$target.'">' . get_the_title() . '</a></'.$title_tag.'>';
            $html .= $separator_html;
            $html .= '<span '.$category_style.' class="project_category">';
            $k = 1;
            foreach ($terms as $term) {
                $html .= "$term->name";
                if (count($terms) != $k) {
                    $html .= ', ';
                }
                $k++;
            }
            $html .= '</span>'; //close span.project_category
            $html .= '</div>'; //close div.hover_feature_holder_title_inner
            $html .= '</div>'; //close div.hover_feature_holder_title

            $html .= "<span class='feature_holder'>";
            $html .= '<span class="feature_holder_icons">';
            if ($lightbox == "yes") {
                $html .= "<a class='lightbox hover_icon_holder' title='" . $title . "' href='" . $large_image . "' data-rel='prettyPhoto[" . $slug_list_ . "]'><span ".$features_icons_styles." class='hover_icon icon_search'></span></a>";
            }
            $html .= "<a class='preview hover_icon_holder' href='" . $portfolio_link . "' target='".$target."'><span ".$features_icons_styles." class='hover_icon icon_link_alt'></span></a>";
            if ($portfolio_qode_like == "on") {
                $html .= "<span ".$features_icons_styles." class='portfolio_like hover_icon_holder'>";

                if (function_exists('qode_like_portfolio_list')) {
                    $html .= qode_like_portfolio_list(get_the_ID());
                }
                $html .= "</span>";
            }
            $html .= "</span>"; //close span.feature_holder_icons
            $html .= "</span>"; //close span.feature_holder

            $html .= "</span>"; //close span.text_inner
            $html .= "</span>"; //close span.text_outer
            $html .= "</span>"; //close span.text_holder
            $html .= "</div>"; //close div.image_holder
            $html .= "</article>";

        endwhile;
        else:
            ?>

Lille Hummer Lille Hummer · Accepted Answer · 2016-05-13T19:12:44

I'm not sure what the rest of your theme looks like, but I am giving it a try here. What I think is triggering the lightbox and the code that decides which image to view in the lightbox is:

class='lightbox hover_icon_holder' title='" . $title . "' href='" . $large_image . "' data-rel='prettyPhoto[" . $slug_list_ . "]'

So we'll be moving this part to the outer link of your code. I've also removed the two buttons from your code. I think it becomes like this:

$html .=" " . $masonry_size;
        $html .="'>";

        $html .= "<div class='image_holder'>";
        $html .= "<a class='portfolio_link_for_touch lightbox' href='".$large_image."' data-rel='prettyPhoto[" . $slug_list_ . "]' target='".$target."'>";
        $html .= "<span class='image'>";
        $html .= get_the_post_thumbnail(get_the_ID(), $image_size);
        $html .= "</span>"; //close span.image
        $html .= "</a>"; //close a.portfolio_link_for_touch

        $html .= "<span class='text_holder'>";
        $html .= "<span class='text_outer'>";
        $html .= "<span class='text_inner'>";
        $html .= '<div class="hover_feature_holder_title">';
        $html .= '<div class="hover_feature_holder_title_inner">';
        $html .= '<'.$title_tag.' '.$title_styles.' class="portfolio_title"><a href="' . $portfolio_link . '" '.$title_styles.' target="'.$target.'">' . get_the_title() . '</a></'.$title_tag.'>';
        $html .= $separator_html;
        $html .= '<span '.$category_style.' class="project_category">';
        $k = 1;
        foreach ($terms as $term) {
            $html .= "$term->name";
            if (count($terms) != $k) {
                $html .= ', ';
            }
            $k++;
        }
        $html .= '</span>'; //close span.project_category
        $html .= '</div>'; //close div.hover_feature_holder_title_inner
        $html .= '</div>'; //close div.hover_feature_holder_title

        $html .= "</span>"; //close span.text_inner
        $html .= "</span>"; //close span.text_outer
        $html .= "</span>"; //close span.text_holder
        $html .= "</div>"; //close div.image_holder
        $html .= "</article>";

    endwhile;
    else:
        ?>

Wordpress theme lightbox thumbnail

1 Answers