2017-01-04 15 views
0

Базовый код считывается Фондом и изменяется на выходе.Фонд 6 Показывает, уже инициализирует, но не загружается

<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> 

выход после того, как основа Init

<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> 

Reveal Output (это получает переехал в нижней части колонтитула в фундаментной INIT)

<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 (); был использован, другие работы фонда работают.

ответ

0

Оказывается, Ajaxify код просмотр Trigger как внутренний Link и сделал свой собственный щелчок слушатель по умолчанию показывает модальным ..

$.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(); 

Так как байпас просто добавил класс ко всем моим триггерам, которые не должны быть ajaxed.

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

Это устранило все проблемы.

0

Вы не видите наложение изображений со спецификациями при нажатии на фотографию грузовика? В моем простом тест ниже наложения показан просто отлично:

<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>