/ Сайтостроение / Адаптивность / Всплывающий тизер (Add this)

Всплывающий тизер (Add this)

Всплывающий тизер вызывает больше доверия у посетителя, т.к. свои видом напоминает системные сообщения. Данный функционал частично имитирует сервис (плагин) Add this.

Верстка и стили тизера

Вставляем блок в футер. В данном примере в блок подгружается последняя запись.

<div id="addthis-block">
<?php
query_posts('posts_per_page=1');
if (have_posts()) : while (have_posts()) : the_post(); ?>

<a href="<?php the_permalink(); ?>">
<?php
if( has_post_thumbnail() )
{the_post_thumbnail('square');}
else
{echo '<img src="'.get_template_directory_uri().'/images/img-default-square.jpg" />';}
?>
</a>

<div class="text">
<span>Рекомендации для вас</span>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<span><?php bloginfo( 'name' ); ?>.ru</span>
</div>

<?php
endwhile; endif;
wp_reset_query();
?>

<div class="addthis-block-hide"><i class="fa fa-caret-down" aria-hidden="true"></i></div>

</div>

Стили CSS

/* Add This block */

#addthis-block {
    position: fixed;
    right: 0px;
    bottom: -122px;
    width: 390px;
    height: 120px;
    background-color: #fff;
    border: 1px solid #c5c5c5;
  -o-transition: bottom 0.3s;
  transition: bottom 0.3s ease;
  -webkit-transition: bottom 0.3s ease 0s;
}

.addthis-block-active {bottom: 0px !important;}
.addthis-block-deactive {bottom: -122px !important;}

#addthis-block img {
    height: 120px;
    width: 120px;
    border-radius: 0;
    float: left;
    opacity: 1;
}

#addthis-block .text {
    position: absolute;
    top: 15px;
    right: 20px;
    bottom: 15px;
    left: 140px;
    text-align: left;
    height: 105px;
}

#addthis-block .text span {
    float:left;
    width: 100%;
    margin: 0;
    padding: 0 0 3px;
    font-size: 12px;
    color: #666;
}

#addthis-block .text a {
    float:left;
    width: 100%;
    margin: 5px 0;
    padding: 0;
    line-height: 1.2em;
    font-size: 14px;
    height: 3pc;
    font-weight: 400;
    color: #464646;
}

#addthis-block .text a:hover {color: #000;}

.addthis-block-hide {
    position: absolute;
    right: 5px;
    cursor: pointer;
    display: none;
}

#addthis-block:hover > .addthis-block-hide {display: block !important;}

.addthis-block-show {
    position: absolute;
    right: -5px;
	top: -25px;
    cursor: pointer;
    display: none;
}

.addthis-block-hide .fa {
    padding: 5px 10px;
    font-size: 20px;
    margin: 0;
    color: #bfbfbf;
}

Скрипт тизера

Скрипт тизера основан на скрипте стрелки прокрутки вверх, с небольшими изменениями.

jQuery(function(){
	
 $("#addthis-block").removeAttr("href");
 if ($(window).scrollTop()>="1000") $("#addthis-block").addClass("addthis-block-active")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="1000") $("#addthis-block").removeClass("addthis-block-active")
  else $("#addthis-block").addClass("addthis-block-active")
 });
 
 $('.addthis-block-hide').click(function() {
	 $("#addthis-block").addClass("addthis-block-deactive")
 });
 
});

Наполнение блока

Блок работает, но в него подгружается последняя запись, которая быстро примелькается. По хорошему нужно к нему прикрутить механизм похожие записи или запрос случайной записи.

Также можно сделать проверку и выводить данный блок например только в записях.

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

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Всплывающий тизер (Add this)
Фотогалерея (NextGEN Gallery)
Рекомендации для васФотогалерея (NextGEN Gallery)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.