Question

我正在构建一个使用WordPress和Zurb Foundation的自定义图库：

模板显示自定义帖子的分页存档;自定义查询使用链接缩略图网格填充页面。
使用Foundation 4中的Reveal模式插件，以及WordPress的AJAX将内容附加到reveal-modal div。
点击模态窗口中的.previous-sketch，.next-sketch链接会显示相应的相邻帖子。

我已经成功完成了上述工作，但发现在打开一个模态窗口并在帖子中循环后，事情开始变得不同步。当显示模态窗口时，不显示深色背景.reveal-modal-bg，并且事情表现得有些奇怪。

如果您对此问题有任何特别的见解，我会提前感谢您。

更新：我能够更多地处理这个问题，并且在大多数情况下它似乎有效。虽然我觉得我的解决方案不是最优雅的。

我的jQuery代码如下。

(function($) {

 $.fn.displayPost = function() {
    event.preventDefault();
    var post_id = $(this).data("id");
    var id = "#" + post_id;

    // Check if the reveal modal for the specific post id doesn't already exist by checking for it's length
    if($(id).length == 0 ) {
        // We'll add an ID to the new reveal modal; we'll use that same ID to check if it exists in the future.
        var modal = $('<div>').attr('id', post_id ).addClass('reveal-modal').appendTo('body');
        var ajaxURL = MyAjax.ajaxurl;
         $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {"action": "load-content", post_id: post_id },
            success: function(response) {
                modal.empty().html(response).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');

                modal.bind('opened', function() {
                    // Trigger window resize to reset the left margin.  
                    $(window).trigger('resize');
                    var left;
                    left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
                    $(id).css({
                        left:left + $(window).scrollLeft()
                    });

                return false;
                });
            }
        });
    }
     //If the div with the ID already exists we'll just open it.
     else {
         $(id).foundation('reveal', 'open');
     }

     // Recalculate left margin on window resize
     $(window).resize(function(){
        var left;
        left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
        $(id).css({
            left:left + $(window).scrollLeft()
        });
     });
}

})(jQuery);

// Apply the function when we click on the .reveal link
jQuery(document).on("click", ".reveal,.secondary", function() {
    jQuery(this).displayPost();
});

// Use Reveal's built in function to close the div when we click our paging links
jQuery(document).on("click", ".secondary", function() {
    var id = jQuery(this).closest("div").attr("id");
    jQuery(id).foundation('reveal', 'close');

});

Answer 1

我认为这里的某个人可能知道更好的方法来做到这一点，但是为了其他任何想要解决这个问题的人，我设法找到了解决方案。它有效，但我还没有彻底测试过。

该功能以几种方式扩展了Foundation 4 Reveal的功能：

使用WordPress AJAX动态提取内容以填充模态div。
将模态div居中并允许它变宽。
从模态窗口添加分页导航，触发后将关闭打开的模态窗口，然后打开上一个/下一个模态内容。

以下是代码：

(function($) {

    $.fn.displayPost = function() {

    event.preventDefault();

    var post_id = $(this).data("id");
    var id = "#" + post_id;

    // Check if the reveal modal for the specific post id doesn't already exist by checking for it's length
    if($(id).length == 0 ) {
        // We'll add an ID to the new reveal modal; we'll use that same ID to check if it exists in the future.
        var modal = $('<div>').attr('id', post_id ).addClass('reveal-modal').appendTo('body');
        var ajaxURL = MyAjax.ajaxurl;
         $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {"action": "load-content", post_id: post_id },
            success: function(response) {
                modal.empty().html(response).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');
                modal.bind('opened', function() {
                    // Reset visibility to hidden and set display: none on closed reveal-modal divs, for some reason not working by default when reveal close is triggered on .secondary links  
                    $(".reveal-modal:not('.reveal-modal.open')").css({'visibility': 'hidden', 'display' : 'none'})
                    // Trigger resize 
                    $(window).trigger('resize');
                return false;
                });
            }
        });
    }
     //If the div with the ID already exists just open it.
     else {
         $(id).foundation('reveal', 'open');
     }

     // Recalculate left margin on window resize to allow for absolute centering of variable width elements
     $(window).resize(function(){
         var left;
            left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
            $(id).css({
                left:left + $(window).scrollLeft()
            });
     });
    }

     })(jQuery);

     // Apply the function when we click on the .reveal link
     // (document).ready won't work on any reveal-modal divs added subsequently
     // after page load via AJAX so use .on instead.
     jQuery(document).on("click", ".reveal,.secondary", function() {
      jQuery(this).displayPost();

     });

      // Close open modal via secondary paging links; target parent div id.
      jQuery(document).on("click", ".secondary", function() {
        var id = jQuery(this).closest("div").attr("id");
      jQuery(id).foundation('reveal', 'close');
      });

更新：添加了用于加载AJAX内容的php函数

  public function __construct() {
        add_action( 'wp_ajax_load-content', array($this, 'load_ajax_content' ));
        add_action( 'wp_ajax_nopriv_load-content', array($this, 'load_ajax_content' ));
    }



        /**
         * Function to call the content loaded for logged-in and anonymous users
        */
        public function load_ajax_content ( $post_id ) {

            $post_id = $_POST[ 'post_id' ];

            if (has_post_thumbnail($post_id)) {
                $sketch_id = get_post_thumbnail_id($post_id);  
                $attachment = get_post( $sketch_id );
                $caption = $attachment->post_excerpt;
                $response = '<figure>'. get_the_post_thumbnail($post_id, 'large-sketch') .'<figcaption><p>'. $caption .'</p></figcaption></figure>' . $this->paging_link_nav( $post_id );
                echo $response;
            }

            die(1);
         }

希望其他人觉得这很有用......

Foundation 4 Reveal和WP AJAX：Open Modal Window的上一个/下一个模态窗口？

1 个答案: