jquery - Foundation 4 Reveal 和 WP AJAX : Previous/Next Modal Window from Open Modal Window?

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);
         }

希望其他人发现这有用......