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

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

HIT

12.06.2016

19116

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;
}
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее Читать далее »

Выбор города пользователя

Выбор города пользователя

Создадим модуль выбора города пользователя, на основе которого, будем менять некоторые аспекты сайта. Автоматически определяем и сохраняем город в SESSION Автоматически определяем город (в основу которого легло решение от Яндекс). Читать далее »

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

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

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

/

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

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

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