How to properly display content from a different page in a lightbox

Question

I created a homepage with a grid portfolio layout. On click each image opens with the 'portfolio content' (which is the single page of the portfolio post type) inside with a image and description of the project.

What is the best practice to achieve this method of grabbing the content from the post_type page and opening it up as a lightbox on the homepage/fonrt-page.php file?

I wasn't sure if doing it this way was the best method.

This will grab the 6 portfolio posts but I'm not sure on where to post the 'lightbox' code. Should I place it inside the content-work.php file or add the lightbox code at the bottom before i call the footer?

And do i need to reset my post data if I do insert it at the bottom before calling the footer?

Thanks and sorry if this is pretty long. Just want to get a better understanding of loops.

 <?php 
                    wp_reset_postdata();
                      $args = array(
                          'post_type' => 'portfolio', 
                          'posts_per_page' => 6
                      );
                      $the_query = new WP_Query( $args );       
                  ?>
                  <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>             
                    <?php get_template_part( 'content', 'work' );  ?>

                <?php endwhile; endif; ?>

Answer 1 · 2014-09-25T13:08:05Z

September 25, 2014 1:08pm

I would do everything in one loop for two reasons. 1) If the user has JS turned off then the light box won't work, so you can write some CSS to display everything if JS is off and different CSS for JS on. 2 ) One loop will be faster than 2 loops.

 <?php 
      wp_reset_postdata();
      $args = array(
          'post_type' => 'portfolio', 
          'posts_per_page' => 6
      );
      $the_query = new WP_Query( $args );       
 ?>
  <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>             
    <div class="portfolio-item">
        <?php the_post_thumbnail(); ?>
        <div class="portfolio-content">
            <?php the_content(); // use CSS to hide this ?>
        </div>
    </div>

<?php endwhile; endif; ?>

I would put everything in one loop and then use JS/jQ to attach an onclick event to each portfolio-item. When then I would copy the content inside the portfolio-item div and paste it into the lightbox using JS/jQ.

Are you using Foundation or Bootstrap? Then have a built in modal/lightbox JS. If you post some more of your code or a link to the site I might be able to help you with some of the code.

Answer 2 · 2014-09-24T21:07:05Z

September 24, 2014 9:07pm

Bryan, so what you are trying to do is when a user clicks on one of the portfolio image a light box opens with the full content of the post?

Answer 3 · 2014-09-24T21:10:04Z

September 24, 2014 9:10pm

yes, something like that. Except Its a custom post type with custom fields.

What would be the most accurate and semantic way of writing this? Creating a loop to get the fields then another loop to open the lightbox?

Would you set them up as two different php files or both loops on one file? or am i doing this completely wrong?

Thanks for the response.

Welcome to the Treehouse Community

Looking to learn something new?

bryanbarrera2

bryanbarrera2

How to properly display content from a different page in a lightbox

3 Answers

Andrew Shook

Andrew Shook

bryanbarrera2

bryanbarrera2

Andrew Shook

Andrew Shook

Andrew Shook

Andrew Shook

bryanbarrera2

bryanbarrera2