我正在WordPress中为fancybox图库创建一个循环。这意味着每组图像需要具有相同的rel标识符(例如rel =“gallery1”)。但由于这是一个嵌套循环,换句话说,它是另一个循环的一部分,我需要循环中的下一组图像具有不同于之前/之后的rel标识符(例如,rel =“gallery2”,rel) =“gallery3”等。)。
我已经尝试过下一个单词库,但它只是循环并为每个对象提供另一个数字,而不是为分组中的每个项目保留相同的数字。
我不确定我所解释的是否有意义。这是我想要拥有的基本概念。
{gallery of images 1}
<a href="image" rel="gallery1">
<img src="path">
</a>
<a href="image" rel="gallery1">
<img src="path">
</a>
<a href="image" rel=gallery1">
<img src="path">
</a>
{gallery of images2 }
<a href="image" rel="gallery2">
<img src="path">
</a>
<a href="image rel="gallery2">
<img src="path">
</a>
等等。
页面本身显示来自自定义帖子类型的帖子缩略图(特色图片)库。单击一个库项目(表示自定义帖子类型中的一个项目)将打开一个Bootstrap模式窗口。在该模态窗口中是与该原始图库项目(帖子类型项目)相关的一组图像。单击其中一个图像会打开一个fancybox,但应该仅循环显示该库项目的图像。疯了吗?
页面的其余部分工作正常。只是遇到这个重编号的问题。
我犹豫了发布所有代码,因为它太长了,但是如果它有用,那么你去吧:
// Define the query
$args = array(
'post_type' => 'pixieportfolio',
'post_status' => 'publish',
'orderby' => 'menu_order',
'meta_query' => array(
array(
'key' => 'featured_portfolio_item',
'value' => '1',
'compare' => '=',
)
),
'meta_key' => '_thumbnail_id',
'posts_per_page' => 999
);
$query = new WP_Query( $args );
$count = 0;
// Carousel // ?>
<div id="featuredCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php while($query->have_posts()): $query->the_post(); ?>
<li <?php if($count == 0){ echo 'class="active"';} ?> data-target="#featuredCarousel" data-slide-to="<?php echo $count++; ?>"></li>
<?php endwhile; ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php $count = 0;
while ($query->have_posts()) : $query->the_post();
$count++;
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'pp-home-portfolio' );
$url = $thumb['0'];
$values = get_field('tech_choices');
$terms = get_the_terms($post->ID, 'post_tag');
$custom = get_post_custom($post->ID);
$caption = get_field('caption', '');
$client = get_field('client', '');
$project_url = get_field('project_url', '');
$date = get_field('date', ''); ?>
<!-- Wrapper for slides -->
<div class="item <?php if ($count == 1) { echo 'active';} ?>" data-slide-number="<?php echo $count++; ?>" id="<? the_ID(); ?>">
<div class="item-image" style="background-image: url(<?=$url?>);" title="<?php the_title() ?>" data-toggle="modal" data-target="#myModal<?php echo $count; ?>"></div>
<div class="project-details">
<div class="project-detail-border shadow-effect"></div>
<div class="project-detail">
<div class="top-detail">
<h4><?php the_title(); ?></h4>
<div class="short-description">
<?php $content = get_the_content();
echo wp_trim_words( $content , '20' );
?>
</div>
</div>
<table class="table project">
<tr>
<td valign="middle" class="fifty">
<?php $terms_as_text = strip_tags( get_the_term_list( $wp_query->post->ID, 'pixie-portfolio-categories', '', ', ', '' ) );
echo $terms_as_text;?>
</td>
<td valign="middle" class="fifty">
<?php if( $values ) {
if(in_array('WordPress', $values )){ ?>
<i class="fa fa-wordpress fa-2x" data-toggle="tooltip" title="Wordpress"></i>
<?php } if(in_array('HTML-5', $values )){ ?>
<i class="fa fa-html5 fa-2x" data-toggle="tooltip" title="HTML-5"></i>
<?php } if(in_array('CSS-3', $values )){ ?>
<i class="fa fa-css3 fa-2x" data-toggle="tooltip" title="CSS-3"></i>
<?php } if(in_array('Sportswear', $values )){ ?>
<i class="fa fa-bicycle fa-2x" data-toggle="tooltip" title="Sportswear"></i>
<?php } if(in_array('Adobe', $values )){ ?>
<i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" title="Adobe"></i>
<?php } if(in_array('Code', $values )){ ?>
<i class="fa fa-code fa-2x" data-toggle="tooltip" title="Code"></i>
<?php } if(in_array('Ecommerce', $values )) { ?>
<i class="fa fa-database fa-2x" data-toggle="tooltip" title="MySQL"></i>
<?php }
} else {} ?>
</td>
</tr>
<tr>
<td colspan="2" class="more-info" data-toggle="modal" data-target="#myModal<?php echo $count; ?>">
<div class="view-project">View Project</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal<?php echo $count; ?>" class="modal fade" role="dialog" aria-labelledby="myModal<?php echo $count; ?>Label">
<div class="modal-dialog modal-lg" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title"><?php the_title() ?></h2>
<span>
<?php if( $terms ): ?>
<ul>
<?php foreach( $terms as $term ): ?>
<li><a href="<?php echo get_term_link( $term ); ?>"><?php echo $term->name; ?></a></li>
<?php $icon = get_field('creative_icon', $term->taxonomy . '_' . $term->term_id); echo $icon; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</span>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div>
<p class="post-meta gallery-list">
<?php if( $client ): ?>
<span class="pixie-date">
<span class="title">Client:</span> <?=$client?>
</span>
<?php endif;
if ( $date ): ?>
<span class="post-cats">
<span class="title">Date:</span> <?=$date?>
</span>
<?php endif;
if ( $values ) { ?>
<span class="post-comments">
<?php $values = get_field('tech_choices'); ?>
<span class="title">Tech used in this project:</span>
<?php if(in_array('WordPress', $values )){ ?>
<i class="fa fa-wordpress fa-2x" data-toggle="tooltip" data-placement="bottom" title="WordPress"></i>
<? }
if(in_array('HTML-5', $values )){ ?>
<i class="fa fa-html5 fa-2x" data-toggle="tooltip" data-placement="bottom" title="HTML5"></i>
<? }
if(in_array('CSS-3', $values )){ ?>
<i class="fa fa-css3 fa-2x" data-toggle="tooltip" data-placement="bottom" title="CSS3"></i>
<? }
if(in_array('Sportswear', $values )){ ?>
<i class="fa fa-bicycle fa-2x" data-toggle="tooltip" data-placement="bottom" title="Sportswear"></i>
<? }
if(in_array('Adobe', $values )){ ?>
<i class="fa fa-paint-brush fa-2x" data-toggle="tooltip" data-placement="bottom" title="Illustrator and/or Photoshop"></i>
<? }
if(in_array('Code', $values )){ ?>
<i class="fa fa-code fa-2x" data-toggle="tooltip" data-placement="bottom" title="PHP, JQuery, etc."></i>
<? }
if(in_array('Ecommerce', $values )){ ?>
<i class="fa fa-shopping-cart fa-2x" data-toggle="tooltip" data-placement="bottom" title="ECommerce"></i>
<? }
if(in_array('MySQL', $values )){ ?>
<i class="fa fa-database fa-2x" data-toggle="tooltip" data-placement="bottom" title="MySQL"></i>
<? } ?>
</span>
<?php } ?>
</p>
</div>
<?php echo the_content(); ?>
<blockquote class="testimonial">
QUOTE GOES HERE
</blockquote>
</div>
<div class="col-md-4">
<div class="gallery">
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'darwin-modal-main' );
$url = $thumb['0'];
$thumb2 = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$url2 = $thumb2['0'];
$c = 0; ?>
<a href="<?=$url2?>" class="group" id="port_gal" rel="group<?php echo $c; ?>">
<img src="<?=$url?>" width="300" height="300">
</a>
<?php $images = get_field('gallery_images');
if( $images ) {
foreach( $images as $image ) {
?>
<a href="<?php echo $image['sizes']['large'] ?>" class="group" id="port_gal" rel="group<?php echo $c; ?>">
<img src="<?php echo $image['sizes']['darwin-modal-thumb'] ?>" alt="<?php $image['alt'] ?>" />
</a>
<?php }
} ?>
</div>
<div class="website-button">
<?php if ( $project_url ): ?>
<a class="btn btn-default" href="<?=$project_url?>" target="_blank" role="button">Visit Website</a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php wp_reset_query(); ?>
</div>