Как вывести превью статьи при наведении на ссылку?

Question

[sergiocharm]

Всем привет!

Подскажите пожалуйста, как внутри статьи при наведении на ссылку выводить всплывающее окно с превью. Я думаю это очень юзабилитишная штука и многим будет интересная ее реализация.
Нашел такой код (незаконно), как его заставить работать?
.single.content - я так полагаю обертка текста и в ней скрипт ищет ссылку и при наведении подгружает превью статьи (hrefcontent).

(function($){

	/*наведение на ссылки в статье*/
	$('.single.content p a').hover(
		function(){
			if ($(this).attr('href') && !$(this).hasClass('load')&& !$(this).hasClass('loaded')){
				$(this).addClass('load');
				$(this).html($(this).html()+'<div class="hrefcontent"><div><img src=""></div><h4></h4>'+'<p></p></div>');

				var data = {action: 'post_href',href: $(this).attr('href')};
				$.post('/wp-admin/admin-ajax.php', data, function(response) {
					if(response.title!=''){
						$('.single.content p a.load').find('h4').html(response.title);
						$('.single.content p a.load').find('p').html(response.description);
						$('.single.content p a.load').find('img').attr('src',response.img);
						$('.single.content p a.load').addClass('loaded').removeClass('load');	
					} else
						$('.single.content p a.load').find('.hrefcontent').remove();

				}, 'json');
			}
			if($(this).hasClass('loaded') && $(this).find('.hrefcontent') )	{
				$(this).find('.hrefcontent').show();
			}
		},
		function(){
			$(this).find('.hrefcontent').hide();
		});
})

Как это прикрутить в single.php и заставить работать?

Comments

[drtvader]

По виду тултип. Плагинов тултипов много.

[sergiocharm]

drtvader, гуглил, ни один плагин не подгружает превью статьи при наведении. Везде надо вручную вставлять.

[drtvader]

sergiocharm, ну тут да, нужно дописывать. Просто нужно учитывать еще моменты с touch девайсами.

[drtvader]

sergiocharm, хотя вроде тултипстер что то может как пишет https://www.heteroclito.fr/modules/tooltipster/#demos

[sergiocharm]

drtvader, видел такой, просто подумал есть уже готовое решение, а это крутить прийдется

[drtvader]

sergiocharm, ну в демо написано что ajax может. Ну а там скрипт дописать по какому шаблону строить. Уже меньше дел.

[sergiocharm]

drtvader, можно вас попросить накидать, как это реализовать?

[sergiocharm]

drtvader, а скрипт что я предложил, он что делает?

Answer 1

[sergiocharm]

Сейчас так

// наведение на ссылку
add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script( 'custom-js', 'myajax',
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);

}

add_action( 'wp_footer', 'my_action_javascript', 99 ); // для фронта
function my_action_javascript() {
	?>
	<script type="text/javascript" >
jQuery(function($){

    /* наведение на ссылки в статье */
    $('.entry-content1 p a').hover(
      function(){
        if ($(this).attr('href') && !$(this).hasClass('load') && !$(this).hasClass('loaded')){
          $(this).addClass('load');
          $(this).html($(this).html()+'<div class="hrefcontent"><div><img src=""></div><h4></h4>'+'<p></p></div>');
  
          var data = {
            action: 'my_action',
            href: $(this).attr('href'),
          };

          jQuery.post('<?php echo site_url() ?>/wp-admin/admin-ajax.php', data, 'posts', function(response) {
            if(response!=''){
              $('.entry-content p a.load').find('h4').html(response);
              $('.entry-content p a.load').find('p').html(response.description);
              $('.entry-content p a.load').find('img').attr('src',response.img);
              $('.entry-content p a.load').addClass('loaded').removeClass('load');
            } else
              $('.entry-content p a.load').find('.hrefcontent').remove();
  
          }, 'json');
        }
        if($(this).hasClass('loaded') && $(this).find('.hrefcontent') )	{
          $(this).find('.hrefcontent').show();
        }

      },
      function(){
        $(this).find('.hrefcontent').hide();
      });

}); // jQuery End
	</script>
	<?php
}

add_action( 'wp_ajax_my_action', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );

function my_action_callback() {
	$whatever = 33;

	echo $whatever;

	// выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
	wp_die();
}
// Конец наведения на ссылку