Fancybox（在 Wordpress 上）下一个和上一个按钮答案

【问题标题】：Fancybox (on Wordpress) Next and Previous buttonsFancybox（在 Wordpress 上）下一个和上一个按钮
【发布时间】：2013-08-05 18:31:57
【问题描述】：

我在我的 Wordpress 网站上使用 Fancybox 脚本来显示我的作品集。设置方法如下：

用户访问我的档案作品集页面，在那里他们可以看到我的所有作品。当他们单击我们的一个投资组合项目时，它不会将您带到单个帖子页面，它只是在他们单击的项目的花式框中显示单个帖子信息。

所有这些都很好，但我想实现一个上一个和下一个箭头，以便他们在显示该花式框时在作品之间导航。

我认为我可以像这样在循环中使用 Next 和 previous 的内置 WP 功能：

<?php previous_post(); ?>    <?php next_post(); ?>

但这不起作用，我猜是因为单个帖子页面从未真正显示。

无论如何here is a link I found on the callbacks for it 但我的 JS 技能几乎没有。

最后是我的存档模板的外观以及我如何使用它。

<?php if ( have_posts() ) : ?>

              <?php $counter = 1 ?>

          <!-- START LOOP -->
          <?php while ( have_posts() ) : the_post(); ?>

                      <div class="three columns portfolio-piece">
                          <a href="#more-info<?php echo $counter ?>" class="fancybox">

                              <?php 
                                  if ( has_post_thumbnail() ) {
                                      the_post_thumbnail( 'custom-archive-size' );
                                  } else {
                                      echo 'No Preview Available'; 
                                  } 
                              ?>

                          <div class="cover boxcaption"><?php echo the_title(); ?></div>
                          </a>
                      </div>

                      <div id="more-info<?php echo $counter ?>" style="display:none;width:auto;">
                          <div class="twelve columns">

                              <div class="four columns portfolio-image">
                           <?php 
                                  if ( has_post_thumbnail() ) {
                                      the_post_thumbnail( 'medium' );
                                  } else {
                                      echo 'No Preview Available'; 
                                  } 
                              ?>
                              </div>

                              <div class="eight columns portfolio-listing" style="max-width:720px !important;">

                                <h3 class="portfolio-heading" ><?php the_title() ?></h3>
                                <p><?php the_content() ?></p>

                                  <strong>Website: </strong>
                      <a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></strong>
                              </div>

                          </div>

                     </div><!-- more info -->

                      <?php if ($counter % 4 == 0){echo '</div><div class="twelve columns" style="margin:15px 0;">';} ?>

                     <?php $counter++ ?>

          <?php endwhile; ?>

任何帮助将不胜感激:)谢谢

【问题讨论】：

they can see all my works. When they click on one of our portfolio items it shows the single-post info in a fancybox ... 然后将相同的rel 属性添加到您不同帖子的链接中，您将能够浏览它们
想知道是否有办法让我在该循环中添加一个类似于此的锚来实现我需要的结果：'下一个'
感谢 JFK，因为这是在我的循环中，并且我正在使用计数器页面上显示的所有帖子都具有相同的 rel 和 href，但附加到 #more-info 的数字会发生变化。因此，我需要一种方法来在单击下一个时添加一个到更多信息，并在单击上一个时减去一个以在两者之间导航。就像您查看 #more-info12 并单击下一步一样，您将转到 #more-info13，反之亦然。
尝试将 rel="Gallery" 添加到我的锚标记并将此 jsfiddle.net/xW5gs 添加到我的 JS 文件中，但没有运气:(
好吧，我实际上有两个使用 fancybox 的网站，其中一个我可以通过添加 rel="gallery" 来使用 JFK 的建议，并且效果很好。另一个网站（我最初发布的那个）它不起作用，但我看到有一些 JS 错误可能导致问题？见这里：designloud.com/portfolios_categories/web-design HTML 中的下一个和上一个显示，但在加载 fancybox 时实际上并没有显示？

标签： wordpress fancybox

【解决方案1】：

原来问题出在我的样式表中，由于我的选择框存在一些问题，我在花哨的 box-wrap 上有一个 z-index，但是通过删除箭头确实显示了。

【讨论】：