Question

基础代码由Foundation读取并由输出更改。

<div class="columns medium-6">
    <a data-open="Image-Modal-<?php echo $first; ?>">
        <?php echo wp_get_attachment_image(get_sub_field('image'), 'full', false, 'class=reveal-image'); ?>
        <p class="text-center text-large" ><?php the_sub_field('title'); ?></p>         
    </a>
</div>
<div class="reveal" id="Image-Modal-<?php echo $first; ?>" data-reveal>
     <?php echo wp_get_attachment_image(get_sub_field('opened_image'), 'full', false, 'class=reveal-image'); ?>
</div>

基础初始化后的输出

<a data-open="Image-Modal-1" aria-controls="Image-Modal-1" aria-haspopup="true" tabindex="0">
                                        <img width="500" height="300" src="http://rental.didit-dev.com/wp-content/uploads/2016/12/20z.jpg" class="reveal-image" alt="" srcset="http://rental.didit-dev.com/wp-content/uploads/2016/12/20z.jpg 500w, http://rental.didit-dev.com/wp-content/uploads/2016/12/20z-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px">                                       <p class="text-center text-large">Putzmeister 20X Meter</p>         
                                    </a>

显示输出（这会在基础初始化中移动到页脚底部）

<div class="reveal-overlay"><div class="reveal" id="Image-Modal-4" data-reveal="z2h00k-reveal" role="dialog" aria-hidden="true" data-yeti-box="Image-Modal-4" data-resize="Image-Modal-4">
                                sdsdsdsd
                                     <img width="900" height="1250" src="http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx.jpg" class="reveal-image" alt="" srcset="http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx.jpg 900w, http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx-216x300.jpg 216w, http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx-768x1067.jpg 768w, http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx-737x1024.jpg 737w" sizes="(max-width: 900px) 100vw, 900px">                                </div></div>

没有错误消息 jQuery的（文件）.foundation（）;使用过，其他基础工作正在发挥作用。

Answer 1

点击卡车照片时，您是否看不到符合规格的图像？在我下面的简单测试中，叠加显示得很好：

＆＃13;

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
  </head>
  <body>
    <div class="row">
        <a data-open="Image-Modal-1" aria-controls="Image-Modal-1" aria-haspopup="true" tabindex="0">
            <img width="500" height="300" src="http://rental.didit-dev.com/wp-content/uploads/2016/12/20z.jpg" class="reveal-image" alt="" srcset="http://rental.didit-dev.com/wp-content/uploads/2016/12/20z.jpg 500w, http://rental.didit-dev.com/wp-content/uploads/2016/12/20z-300x180.jpg 300w" sizes="(max-width: 500px) 100vw, 500px">                                       <p class="text-center text-large">Putzmeister 20X Meter</p>
        </a>

        <div class="reveal" id="Image-Modal-1" data-reveal>
            <img width="900" height="1250" src="http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx.jpg" class="reveal-image" alt="" srcset="http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx.jpg 900w, http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx-216x300.jpg 216w, http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx-768x1067.jpg 768w, http://rental.didit-dev.com/wp-content/uploads/2016/12/schwing-39sx-737x1024.jpg 737w" sizes="(max-width: 900px) 100vw, 900px">
        </div>
    </div>    
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

＆＃13;

Answer 2

将Ajaxify代码视图中的Trigger视为内部链接，并在默认的揭密模式上执行自己的单击侦听器。

$.fn.ajaxify = function(){
            // Prepare
            var $this = $(this);

            // Ajaxify
            $this.find('a:internal:not(.no-ajaxy)').click(function(event){
                // Prepare
                var
                    $this = $(this),
                    url = $this.attr('href'),
                    title = $this.attr('title')||null;

                // Continue as normal for cmd clicks etc
                if ( event.which == 2 || event.metaKey ) { return true; }

                // Ajaxify this link
                History.pushState(null,title,url);
                event.preventDefault();
                return false;
            });

            // Chain
            return $this;
        };

        // Ajaxify our Internal Links
        $body.ajaxify();

因此，旁路只是为我的所有触发器添加了一个不应该被激活的类。

<a class="no-ajaxy"/></a>

这解决了所有问题。

Foundation 6 Reveal，已经是Init但未加载

2 个答案: