/ Сайтостроение / Scripts & jquery / Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

HIT

12.06.2016

11467

21

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на другую ссылку — загружается другая запись по ID из ссылки.

Пример: Шорткоды WP

Элементы вызова записи

Ссылка на всплывающее окно должна выглядеть так

<a href="#" id="<?php the_ID(); ?>" class="ajax-post"><?php the_title(); ?></a>

Можно использовать в цикле или отдельно (нужно прописывать ID).

Кнопка быстрого просмотра

<a href="#" id="<?php the_ID(); ?>" class="ajax-post postview"><i class="fa fa-eye"></i></a>

В верстке должна содержатся область куда будет загружаться содержимое записи, в нашем случае — во всплывающем окне

<div class="popup supernova">
<div id="ajax-response"></div>
</div>

Скрипт подгрузки

Далее создаем скрипт, назовем его, например, functions.js. Содержание скрипта:

(function($) {

/** jQuery Document Ready */
$(document).ready(function(){

$( 'a.ajax-post' ).off( 'click' ).on( 'click', function( e ) {

// Вызвать модальное окно
$('.popup.supernova').show();
$('.popup').removeClass('animated fadeOutDown');
$('.popup').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');

/** Prevent Default Behaviour */
e.preventDefault();

/** Get Post ID */
var post_id = $(this).attr( 'id' );

/** Ajax Call */
$.ajax({

cache: false,
timeout: 8000,
url: php_array.admin_ajax,
type: "POST",
data: ({ action:'theme_post_example', id:post_id }),

beforeSend: function() {
$( '#ajax-response' ).html( 'Loading' );
},

success: function( data, textStatus, jqXHR ){

var $ajax_response = $( data );
$( '#ajax-response' ).html( $ajax_response );

},

error: function( jqXHR, textStatus, errorThrown ){
console.log( 'The following error occured: ' + textStatus, errorThrown );
},

complete: function( jqXHR, textStatus ){
}

});

});

});

})(jQuery);

Инициализация скрипта подгрузки

Прописываем в fuctions, назначение скрипта functions.js

/* Регистрация скрипта functions.js */

add_action( 'wp_enqueue_scripts', 'theme_register_scripts', 1 );

function theme_register_scripts() {
 
  /** Register JavaScript Functions File */
  wp_register_script( 'functions-js', esc_url( trailingslashit( get_template_directory_uri() ) . 'functions.js' ), array( 'jquery' ), '1.0', true );
 
  /** Localize Scripts */
  $php_array = array( 'admin_ajax' => admin_url( 'admin-ajax.php' ) );
  wp_localize_script( 'functions-js', 'php_array', $php_array );
 
}
 
/** Enqueue Scripts. */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
function theme_enqueue_scripts() {
 
  /** Enqueue JavaScript Functions File */
  wp_enqueue_script( 'functions-js' );
 
}

Функция подгрузки

И здесь же в funсtions вставляем функцию подгрузки контента записи

/* Ajax Post */
add_action( 'wp_ajax_theme_post_example', 'theme_post_example_init' );
add_action( 'wp_ajax_nopriv_theme_post_example', 'theme_post_example_init' );

function theme_post_example_init() {

/* Made Query */
$args = array( 'p' => $_POST['id'] );
$theme_post_query = new WP_Query( $args );
while( $theme_post_query->have_posts() ) : $theme_post_query->the_post();
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'has_post_thumbnail' );
$url = $thumb['0']; ?>
<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?=$url?>);"><img src="<?=$url?>" width="0" height="0"></div></div>
<h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr( 'Permalink to %s' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-content"><?php the_content(); ?></div><!-- end .entry-content -->
</div>
<?php
endwhile;
exit;
}

Чтобы данное решение работало с различными типами пользовательских записей, нужно немного дополнить код (выделено жирным)

$args = array( 'p' => $_POST['id'],'post_type' => array( 'post', 'page', 'track' ) );

Оформление элементов вызова

CSS всплывающего окна supernova и кнопки быстрого просмотра (по желанию)

.supernova {
    background-color: white;
    padding: 25px;
    height: 500px;
    overflow-y: scroll;
}

.postview {
    position: absolute;
    top: 5px;
    right: 5px;
    height: auto !important;
    width: auto !important;
    background-color: #fff;
    padding: 5px;
    border-radius: 25px;
    opacity: 0.2;
}

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/
Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

/
Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/

Добавить комментарий

21 комментарий

  1. Колян

    Лайт бокс не работает во всплывающем окне . Если использовать NextGEN Gallery то возвращает [nggallery id=2] .. с другими просто не хочет работать .. кто нибудь сталкивался ? Куда копать подскажите?

    1. maker1447
      maker1447

      Не совсем понятен вопрос. Попытался вставить шорткод (но не NextGEN Gallery) и в подгруженном всплывающем окне он превратился в форму обратной связи. т.е. по тому же сценарию должна выводится галерея..

  2. Саня

    Большое спасибо тебе, уважаемый автор за код) Прикрутил его к плагину Responsive Lightbox (подправил макет вывода согласно верстке темы) и все отлично, посты на главной всплывают) Но есть проблема. На сайте, также, есть бесконечная подгрузка постов на ajax и после подгрузки на элементах, загруженных посредством ajax, всплывашка не работает( Я не великий программист и не могу понять пока, что сделать нужно, чтобы кнопка всплывающих постов заработала… Помоги, если можешь)

    1. maker1447
      maker1447

      Я также столкнулся с этой проблемой((. Проблема думаю в том, что в DOM появляются новые объекты, которые jquery не видит. Есть идеи (перезагружать скрипт всплывающих окон при подгрузке постов «налету»), но конкретного решения у меня пока нет.

  3. fantom2

    То что надо, но почему то не работает. Где то указывать путь к к файлу js?

    1. maker1447
      maker1447

      Путь к скрипту указывается здесь:
      wp_register_script( 'functions-js', esc_url( trailingslashit( get_template_directory_uri() ) . 'functions.js' ), array( 'jquery' ), '1.0', true );
      Из этого кода следует, что он должен находится в папке с темой.

    2. fantom2

      Вот переделаный скрипт. С ним все работает.
      //function($) {

      /** jQuery Document Ready */
      $(document).ready(function(){

      $( ‘a.ajax-post’ ).click(function(e){

      //});

      //$( ‘a.ajax-post’ ).off( ‘click’ ).on( ‘click’, function( e ) {

      // Вызвать модальное окно

      $(‘.popup.supernova’).show();
      $(‘.popup’).removeClass(‘animated fadeOutDown’);
      $(‘.popup’).addClass(‘animated fadeInDown’);
      $(‘#backfon’).show();
      $(‘#backfon’).removeClass(‘fadeOut’);
      $(‘#backfon’).addClass(‘animated fadeIn’);

      /** Prevent Default Behaviour */
      e.preventDefault();

      /** Get Post ID */
      var post_id = $(this).attr( ‘id’ );

      /** Ajax Call */
      $.ajax({

      cache: false,
      timeout: 8000,
      url: php_array.admin_ajax,
      type: «POST»,
      data: ({ action:’theme_post_example’, id:post_id }),

      beforeSend: function() {
      $( ‘#ajax-response’ ).html( ‘Loading’ );
      },

      success: function( data, textStatus, jqXHR ){

      var $ajax_response = $( data );
      $( ‘#ajax-response’ ).html( $ajax_response );

      },

      error: function( jqXHR, textStatus, errorThrown ){
      console.log( ‘The following error occured: ‘ + textStatus, errorThrown );
      },

      complete: function( jqXHR, textStatus ){
      }

      });

      });
      //Закрываем окно и фон затемнения
      $(‘ #backfon’ ).click(function(e) {

      $(‘.popup.supernova’).hide();
      $(‘#backfon’).hide();
      });
      });
      //})(jQuery);

    3. fantom2

      + вы не дали css этих классов .popup , #backfon я искал в коде вашего сайта. ))). Но спасибо!!!, переделав все — то что надо!!!. Вот бы еще придумать как переключат новости в том же модальном окне без перезагрузки страницы.

      1. maker1447
        maker1447

        Стили, которые вы ищите, есть здесь: https://opttour.ru/web/scripts-and-jquery/modalnoe-okno-na-jquery/.
        Если с переключением — можете попробовать iframe, либо делать сайт полностью на ajax (я над этим и сам работаю..)

  4. Дмитрий

    Добрый день. Поставил код все работает, но есть проблема, выводящиеся посты имеют плагины(Symple Shortcodes) после подгрузки аяксом соответственно аккорды не работают. Подскажите пожалуйста, как можно решить данную проблему?

    1. maker1447
      maker1447

      Не знаком с плагином Symple Shortcodes. Что он делает? Чтобы понять в чем может быть причина.. т.к. шорткоды у меня работают в загруженных ajax’ом записях.

      1. Дмитрий

        Использую из него Accordion меню. Вот тестовая страница с вашим аякс выводом. http://rozkladkr.com/test/
        Не работают также и другие плагины которые выводятся вместе с записью.

        1. maker1447
          maker1447

          Я понял в чем проблема. При подгрузке контента ajax’ом появляются элементы которых изначально не было в DOM и jquery на котором работает Accordion не реагирует на них, таким образом могут не работать и другие плагины.

          1. Дмитрий

            А как можно исправить эту проблему?

  5. maker1447
    maker1447

    А как можно исправить эту проблему?

    Это не так просто. Нет универсального решения. Нужно ковырять jQuery и экспериментировать.

    1. Влад

      Доьрый день, а как вывести ссылку в адрессную строку браузера записи при открытие ее в сплывающем окне? Пример:https://dribbble.com/shots/3428366-Ueno-store-Grand-Opening

      1. Alexandr
        Alexandr

        Не понял вопроса. Строка браузера должна измениться на адрес который во всплывающем окне? В примере не понял где там всплывающее окно. Изображение открывается лайтбоксом, но строка браузера не меняется.

      2. Alexandr
        Alexandr

        Теперь понял! Вот с этой страницы https://dribbble.com/kwokyinmak если нажимать на работы — они всплывают и изменяется адрес URL. Это можно делать с помощью технологии window.location. Делаем событие при открытии окна — изменение url без перезагрузки, новый url у нас уже есть в одной из переменных из самого всплывающего окна. При закрытии окна — сделать событие на возвращение исходного url, снова без перезагрузки.

        1. Влад

          А можете привести пример в виде кода?

  6. Андрей

    Помогите пожалуйста

    functions.js:22 Uncaught ReferenceError: php_array is not defined
    at HTMLAnchorElement. (functions.js:22)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.q.handle (jquery.min.js:3)

    Вот это не хочет хавать url: php_array.admin_ajax,

  7. User

    Помогите прикрутить всю это крутизну к GetUiKit Framework
    https://getuikit.com/docs/modal

Открывать запись во всплывающем окне
Быстрый просмотр товара без плагина
Рекомендации для васБыстрый просмотр товара без плагинаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.