簡體   English   中英

WordPress用縮略圖擴展網格

[英]WordPress expanding grid with thumbnail

我正在使用codrops解決方案在不斷擴展的網格中顯示團隊成員: http ://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

我已經能夠更改一些代碼以在網格預覽中顯示我的帖子縮略圖。 但是,我想在展開的視圖中以全尺寸顯示同一張圖片。 在原始版本中,它在名為1.jpg的文件中捕獲圖像。 如何獲取縮略圖?

這是我的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; ?>

原始CSS略有更改以適應我的需要: https : //github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css

原始JS上沒有更改: https : //github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js

請看看您的代碼:

data-largesrc="images/1.jpg"

將此更改為您的縮略圖網址。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM