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

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

HIT

12.06.2016

16267

21

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

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

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

<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($) {
	$(document).ready(function(){
		//$('a.ajax-post').off('click').on('click', function(e) {
		$("body").on("click", "a.ajax-post", function (e) {

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

			e.preventDefault(); //Prevent Default Behaviour

			var post_id = $(this).attr( 'id' ); //Get Post 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() {
	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(<?php echo $url; ?>);"><img src="<?php echo $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>
		</div>
	<?php
	endwhile;
	exit;
}

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

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

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

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

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

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

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

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

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

/
Опросы на сайте без плагина

Опросы на сайте без плагина

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно. Как создать функционал опросов с помощью плагинов описано здесь. Создадим форму опроса для Читать далее »

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

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

  1. Колян

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

    1. maker1447

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

  2. Саня

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

    1. maker1447

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

  3. fantom2

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

    1. 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

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

  4. Дмитрий

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

    1. maker1447

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

      1. Дмитрий

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

        1. maker1447

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

          1. Дмитрий

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

  5. maker1447

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

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

    1. Влад

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

      1. Alexandr

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

      2. 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 минут.