Search code examples
javascriptcsswordpressgridexpand

WordPress expanding grid with thumbnail

I'm using codrops solution to display team members in an expanding grid: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

I was already able to change some code to display my post thumbnail in the grid preview. However, I want to display the same picture in full size in the expanded view. In the original version it grabs an image in the files called 1.jpg. How can I achieve to grab my thumbnail?

Here is my PHP/HTML:

<ul id="og-grid" class="og-grid">
<?php $args = array( 'post_type' => 'mitarbeiter');
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <li>
        <a href="mailto:<?php the_field('email')?>" data-largesrc="images/1.jpg" data-title="<?php the_title(); ?>" data-description="<?php the_field('funktion') ?><br /><br />Rufen Sie mich an unter <?php the_field('telefonnummer')?> oder schreiben Sie mir eine Nachricht.">

            <?php
            if ( has_post_thumbnail() ) {
            the_post_thumbnail('team');
            }
            else {  } ?>
        </a>
        <?php the_title(); ?>

    </li>
<?php endwhile; ?>

Original CSS is just slightly changed to fit my needs: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css

No changes on original JS: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js

Solution

  • Please have al look at your code:

    data-largesrc="images/1.jpg"

    Change this to your thumbnail url.