Наверное, самый частый вопрос, который задавали через форму — это была просьба выложить скрипт выезжающей панели, которая появляется когда прокручиваешь до конца страницы на этом блоге.
Сегодня речь пойдет именно о таких плагинах и скриптах, которые вы самостоятельно можете установить на свой сайт.
Скажу сразу, что у меня на сайте стоит переделанный плагин . Я хотел его выложить, но из-за того, что я сильно его кастомизировал под нужды этого сайта, его сложно было бы устанавливать на других сайтах, поэтому я решил найти похожее решение. И обламался по-началу. Ничего подобного не удавалось найти, покуда случайно не попал на new york times, где есть подобное решение, посмотрел их исходный код и нашел название плагина, а потом ещё одного. В общем, чего кота по яйцам гладить, сейчас расскажу обо всех решениях.
1. Плагин
Собственно делает тоже, что и мой переделанный, можете глянуть демо на самом сайте. Весь смысл заключается в том, что когда вы прокручиваете страницу до определенного слоя — появляется это окошко, как только слой уходит с видимой части экрана — исчезает.
Подключается просто
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.slidenote.js" type="text/javascript"></script>
Далее, нужно в коде страницы разместить слой с уникальным id, при достижении которого срабатывает скрипт
К примеру, такой
<div id="myNotification"></div>
И теперь остается только вызвать сам скрипт с параметрами (или без)
$('#myNotification').slideNote({
where: 640,
corner: 'left',
url: 'ajax.html',
container: '<b style="color:black;background-color:#a0ffff">note</b>',
closeImage: '/images/close.png',
displayCount: 3,
onSlideIn: function() { alert('Displayed!'); },
onSlideOut: function() { alert('Hidden!'); }
});
where — означает насколько далеко в пикселях от указаного слоя должен срабатывать скрипт
corner — с какого угла появляется окошко
URL — при желании содержимое самого окошка будет подгружаться с указанного урла
container — работает в связке с предыдущим, указывает с какого слоя будет браться содержимое
closeImage — ссылка на картинку закрывающую окошко
displayCount — сколько максимум показывать окошко
onSlideIn — можно указывать событие при появлении окна
onSlideOut — назначение события при закрытии окна
В общем-то и все, в самом окошке можно выводить все, что угодно, это как обычный слой, можете туда запихнуть рекламу, подписку, список похожих статей, да, что душа пожелает. Такие попапы хорошо привлекают внимание и не навязчивые, как обычные попапы, которые появляются по центру страницы.
Для тех, кто не умеет устанавливать скрипт ручками, есть даже
2.
Собственно этот плагин и используется на new york times. Он не доступен в виде отдельного скрипта, но сам плагин для wordpress имеет немало полезных функций.
Его основное предназначение — показывать ссылку на следующий пост с рубрики. Также доступны шорткоды, для вставки определенных сообщений на страницы. Плагин продолжает развиваться и имеет уже сейчас немало настроек, так что пользуйтесь.
Мониторинг сетки. Если ваш компьютер постигла страшная болезнь, неизвестный природе вирус — вам нужно найти где можно антивирусы скачать бесплатно и без регистрации. Забей на доктора, помоги своему компьютеру сам.
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Эх. Ждал именно как у вас окошко. Эти плагины — не то.
Конечно можно перелопатить и тот и тот под себя, но то, что у Вас стоит — просто идеально мне подходит =)
а что не устраивает в плагинах? как раз там более простая интеграция + оформление окошка вынесено отдельно в css, а значит можно настроить его таким же как и мое. В отличие от моего окошка, большая часть настроек которого делается внутри скрипта, что неудобно
Да тоже самое на самом деле, что ваш ковырять, что эти.
Ну первый только шорткодами пользоваться, если нужны ссылки в окошке. Автор ещё не сделал через виджет. Последний коммент от него в Ноябре 2010 про то, что будет в новой версии и до сих пор нет.
Второй плагин буду ковырять скорее всего — больше похоже на то, что нужно.
Мне, к примеру, всего-то нужно Ссылку на подписку вставить да текста какого написать информационного. Но с этими плагинами нужно всё перелопатить к виду типа как у вас т.к. изначально совсем не то. Да не суть =) Разберёмся.
так а что там лопатить? slide note — точно такой же функционал имеет, но в отличие от того, что стоит у меня, весь его внешний вид делается обычной версткой и css, в сам скрипт лезть вообще не нужно. Если очень нужно — то я могу выложить и свой, но устанавливать его просто не удобно
Да, мне тоже очень понравилось как у Вас сделано, попробывал slide note установить, сам плагин работает, но css в нём настроить почему то нельзя. Написано, что CSS (отключён) при попытке отредактировать сам плагин. А как его включить не знаю
в крайнем случае можно посмотреть что там за стили и вставить нужные в файл стилей темы с припиской !important — тогда они перебьют стили плагина
Здравствуй, а можно выкинуть сам плагин slide note, а то не могу его найти или желательно подробно рассказать, как подключали это всплывающее окошко на своем сайте. Заранее спасибо.
в статье есть ссылка на плагин slide note. И то, что у меня на сайте, это не он, у меня ручная функция, без плагина. Я напишу статью как его делал — это будет следущая как раз. Но если вы не имеете хотя бы базовых понятий и html, то врядли получиться установить. Но все шаги постараюсь описать подробно. К след выходным точно статью напишу
спасибо за оперативность. кстати, нашел похожий плагин wp-mk.
ссылку дайте, интересно глянуть
— держите, вот только с ним возникла проблема: на локальном хостинге работает отлично, но когда закачиваю файлы на сервер ничего не появляется, а в консоле браузера выдает такую ошибку: Resource interpreted as Script but transferred with MIME type text/html: «http://prolawyer.by/wp-content/plugins/wp-mk/renderer.php?ver=3.3.2». professiya-yurist.html:12 — может подскажите что это и как это решить?
-ошибся с ссылкой 🙂
скорее всего просто настройки хостинга. У вас скрипт читается как простой текст из-за этого и ошибка, обратитесь к хостеру
спасибо, как вам плагин?
насколько я понял, то он делает выезжающую панель, но не делает похожие записи. Slidenote как по мне, то лучше
Мне в принципе так и нужно чтобы при прокрутке выскакивало просто окошко с формой подписки