Загрузка контента страницы с помощью AJAX в Fancybox?

Question

Загрузка контента страницы с помощью AJAX в Fancybox?

10 янв. 2014 г., 00:46:52

Просмотры: 18.9K

Голосов: 0

Я нашел множество руководств о том, как динамически загружать страницы в WordPress и даже их содержимое, например:

как-загрузить-только-контент-поста-wordpress-с-помощью-ajax

и

Лучший способ загрузить контент страницы во всплывающем окне Fancybox?

Но они не совсем соответствуют моим потребностям.

Основная проблема, с которой я сталкиваюсь, заключается в том, что я хочу открывать страницу в Fancybox через AJAX, но при этом сохранить возможность доступа к этой странице по её обычному URL на случай, если мне потребуется отправить пользователя напрямую на эту страницу. Я понимаю, что могу дублировать каждую страницу (одну с упрощенным шаблоном для Fancybox, другую — для основного сайта), но это выглядит как кошмар для поддержки в будущем.

Короче говоря, я хочу использовать AJAX для получения и загрузки только контента поста и отображения его в Fancybox.

Ребята, есть идеи? :)

user2558393

13

ajax

Все ответы на вопрос

Foxsk8 131 · Accepted Answer · 2014-01-10T02:27:40Z

Вот как это выглядит. Google не использует JS и ничего лишнего. Также ссылки могут использоваться без GET, просто обычный URL: page.com/post-name/

На странице записи:

<?php
$apost = $_GET["type"];
preg_replace('/_/', 'html', preg_replace('/%/', 'html', htmlentities(mysql_real_escape_string($apost))));
?>
<?php if($apost == 'iframe') { ?>
<?php get_header('single'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="popup people">
    содержимое попапа
</div>
<?php endwhile; endif; ?>
</body>
</html> 
<?php } else { ?>

<?php get_header(); ?>
<div class="single">
    <?php if (have_posts()) : while (have_posts()) : the_post();?>
    содержимое записи
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

<?php } ?>

На HTML кнопке или ссылке:

<a href="<?php the_permalink();?>#<?php the_ID(); ?>" data-fancybox-type="iframe" class="various" id="<?php the_ID(); ?>" data-class="<?php echo get_post_type( get_the_ID() ); ?>">Просмотреть элемент</a>

В JavaScript:

$(".results .results_item a").each(function(){
        var hrefParts = $(this).attr('href').split('#');
        $(this).attr('href', hrefParts[0] + '?type=iframe#' + hrefParts[1]);
        });

$("a").fancybox({
    maxWidth    : 615,
    maxHeight   : 2000,
    fitToView   : true,
    width       : '100%',
    height      : '100%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    wrapCSS : 'people' // добавляем класс к обертке fancybox
});

$("a").click(function(event) {
        window.location.hash = this.hash;
    });

    if(window.location.hash) {
      var hash = window.location.hash.substring(1); // Получаем hash из переменной, удаляя символ #
      var new_class_name = $("#" + hash).data("class");
      $("#" + hash).fancybox({
        maxWidth    : 615,
        maxHeight   : 2000,
        fitToView   : true,
        width       : '100%',
        height      : '100%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        wrapCSS : new_class_name // добавляем класс к обертке fancybox
    }).trigger('click');
      // hash найден
      } else {
          // Hash не найден
      }