在Foundation 3中发布公开帖子

时间:2013-05-27 作者:Jaypee

我正在尝试在一个显示模式(F3)中打开一个帖子。最初,我通过将揭示代码放在自定义帖子类型的循环中来解决这个问题。觉得不错,但我遇到了几个问题。

由于它位于主循环中,当页面加载时,它将加载我的每个自定义帖子类型的所有modal,从性能角度来看,这不是很好。我的代码基本上是:<a id="more" href="#myModal-<? the_ID(); ?>" data-reveal-id="<? the_ID(); ?>">Details</a> 对于触发器和<div id="<? the_ID(); ?>" class="reveal-modal medium"> 在循环内。

此外,我正在将Foundation的幻灯片轨道放置在该模式框中。问题是,它只会启动其中一个。

我知道这是因为实现不好,而且Orbit幻灯片无法多次初始化。

是否有人试图实现这一点,但在主循环中使用模式代码,让它调用单个模板以显示其内容?任何其他技术都将受到赞赏。

1 个回复
SO网友:tnog

我不确定您是否还在解决这个问题,我使用的是F4,因此可能不是完全相同的问题,但我将Reveal与WP的内置AJAX结合起来检索内容。我将在下面添加代码的相关部分:

下面是插件代码:

      public function __construct() {

        self::$dir    = plugin_dir_path( __FILE__ );
        self::$url    = plugin_dir_url( __FILE__ );       
        add_action( \'wp_enqueue_scripts\', array($this, \'include_scripts\' ));
        add_action( \'wp_ajax_load-content\', array($this, \'load_ajax_content\' ));
        add_action( \'wp_ajax_nopriv_load-content\', array($this, \'load_ajax_content\' ));
    }


       public function include_scripts() {

            if ( is_page(\'sketchbook-pages\' ) ) {

                // embed the javascript file to make the AJAX request
                wp_enqueue_script( \'reveal\', get_template_directory() . \'/js/foundation/foundation.reveal.js\', array( \'jquery\', \'reverie-js\' ), \'\', true );
                wp_enqueue_script( \'my-ajax-request\', self::$url . \'js/sketchbook_ajax.js\', array( \'jquery\' ) );
                wp_localize_script( \'my-ajax-request\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

            }
        }


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






(function($) {
$.fn.displayPost = function() {
     $(this).click(function(event){
        event.preventDefault();
        //event.stopPropagation;

        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()
                        });
                         $(\'.previous-sketch,.next-sketch\').displayPost($(this));


                    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);
这是sketchbook\\u ajax。js公司:

jQuery(document).ready(function($) {

$(\'.reveal\').displayPost($(this));
    // First retrieve the post id from the selectors data-id 
 });
我已经让它工作了,但是分页模式窗口仍然有点麻烦。

结束