Задача: открывать запись во всплывающем окне используя загрузку «налету» (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;
}
Лайт бокс не работает во всплывающем окне . Если использовать NextGEN Gallery то возвращает [nggallery id=2] .. с другими просто не хочет работать .. кто нибудь сталкивался ? Куда копать подскажите?
Не совсем понятен вопрос. Попытался вставить шорткод (но не NextGEN Gallery) и в подгруженном всплывающем окне он превратился в форму обратной связи. т.е. по тому же сценарию должна выводится галерея..
Большое спасибо тебе, уважаемый автор за код) Прикрутил его к плагину Responsive Lightbox (подправил макет вывода согласно верстке темы) и все отлично, посты на главной всплывают) Но есть проблема. На сайте, также, есть бесконечная подгрузка постов на ajax и после подгрузки на элементах, загруженных посредством ajax, всплывашка не работает( Я не великий программист и не могу понять пока, что сделать нужно, чтобы кнопка всплывающих постов заработала… Помоги, если можешь)
Я также столкнулся с этой проблемой((. Проблема думаю в том, что в DOM появляются новые объекты, которые jquery не видит. Есть идеи (перезагружать скрипт всплывающих окон при подгрузке постов «налету»), но конкретного решения у меня пока нет.
То что надо, но почему то не работает. Где то указывать путь к к файлу js?
Путь к скрипту указывается здесь:
wp_register_script( 'functions-js', esc_url( trailingslashit( get_template_directory_uri() ) . 'functions.js' ), array( 'jquery' ), '1.0', true );Из этого кода следует, что он должен находится в папке с темой.
Вот переделаный скрипт. С ним все работает.
//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);
+ вы не дали css этих классов .popup , #backfon я искал в коде вашего сайта. ))). Но спасибо!!!, переделав все — то что надо!!!. Вот бы еще придумать как переключат новости в том же модальном окне без перезагрузки страницы.
Стили, которые вы ищите, есть здесь: https://opttour.ru/web/scripts-and-jquery/modalnoe-okno-na-jquery/.
Если с переключением — можете попробовать iframe, либо делать сайт полностью на ajax (я над этим и сам работаю..)
Добрый день. Поставил код все работает, но есть проблема, выводящиеся посты имеют плагины(Symple Shortcodes) после подгрузки аяксом соответственно аккорды не работают. Подскажите пожалуйста, как можно решить данную проблему?
Не знаком с плагином Symple Shortcodes. Что он делает? Чтобы понять в чем может быть причина.. т.к. шорткоды у меня работают в загруженных ajax’ом записях.
Использую из него Accordion меню. Вот тестовая страница с вашим аякс выводом. http://rozkladkr.com/test/
Не работают также и другие плагины которые выводятся вместе с записью.
Я понял в чем проблема. При подгрузке контента ajax’ом появляются элементы которых изначально не было в DOM и jquery на котором работает Accordion не реагирует на них, таким образом могут не работать и другие плагины.
А как можно исправить эту проблему?
Это не так просто. Нет универсального решения. Нужно ковырять jQuery и экспериментировать.
Доьрый день, а как вывести ссылку в адрессную строку браузера записи при открытие ее в сплывающем окне? Пример:https://dribbble.com/shots/3428366-Ueno-store-Grand-Opening
Не понял вопроса. Строка браузера должна измениться на адрес который во всплывающем окне? В примере не понял где там всплывающее окно. Изображение открывается лайтбоксом, но строка браузера не меняется.
Теперь понял! Вот с этой страницы https://dribbble.com/kwokyinmak если нажимать на работы — они всплывают и изменяется адрес URL. Это можно делать с помощью технологии window.location. Делаем событие при открытии окна — изменение url без перезагрузки, новый url у нас уже есть в одной из переменных из самого всплывающего окна. При закрытии окна — сделать событие на возвращение исходного url, снова без перезагрузки.
А можете привести пример в виде кода?
Помогите пожалуйста
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,
Помогите прикрутить всю это крутизну к GetUiKit Framework
https://getuikit.com/docs/modal