带有缩略图的 WordPress 扩展网格
WordPress expanding grid with thumbnail
我正在使用 codrops 解决方案在扩展网格中显示团队成员:http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
我已经能够更改一些代码以在网格预览中显示我的 post 缩略图。但是,我想在展开视图中以全尺寸显示相同的图片。在原始版本中,它会在名为 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"
将此更改为您的缩略图 url。
我正在使用 codrops 解决方案在扩展网格中显示团队成员:http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
我已经能够更改一些代码以在网格预览中显示我的 post 缩略图。但是,我想在展开视图中以全尺寸显示相同的图片。在原始版本中,它会在名为 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"
将此更改为您的缩略图 url。