Отборная информация, которая вставляет!

Плагин и скрипт выезжающей панели на jquery

Наверное, самый частый вопрос, который задавали через форму — это была просьба выложить скрипт выезжающей панели, которая появляется когда прокручиваешь до конца страницы на этом блоге.

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

Скажу сразу, что у меня на сайте стоит переделанный плагин pull out content. Я хотел его выложить, но из-за того, что я сильно его кастомизировал под нужды этого сайта, его сложно было бы устанавливать на других сайтах, поэтому я решил найти похожее решение. И обламался по-началу. Ничего подобного не удавалось найти, покуда случайно не попал на new york times, где есть подобное решение, посмотрел их исходный код и нашел название плагина, а потом ещё одного. В общем, чего кота по яйцам гладить, сейчас расскажу обо всех решениях.

1. Плагин slide note

Собственно делает тоже, что и мой переделанный, можете глянуть демо на самом сайте. Весь смысл заключается в том, что когда вы прокручиваете страницу до определенного слоя — появляется это окошко, как только слой уходит с видимой части экрана — исчезает.

Подключается просто

<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 — назначение события при закрытии окна

В общем-то и все, в самом окошке можно выводить все, что угодно, это как обычный слой, можете туда запихнуть рекламу, подписку, список похожих статей, да, что душа пожелает. Такие попапы хорошо привлекают внимание и не навязчивые, как обычные попапы, которые появляются по центру страницы.

Для тех, кто не умеет устанавливать скрипт ручками, есть даже плагин под wordpress

2. upPrev

Собственно этот плагин и используется на new york times. Он не доступен в виде отдельного скрипта, но сам плагин для wordpress имеет немало полезных функций.

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

Мониторинг сетки. Если ваш компьютер постигла страшная болезнь, неизвестный природе вирус — вам нужно найти где можно антивирусы скачать бесплатно и без регистрации. Забей на доктора, помоги своему компьютеру сам.


 

Похожие статьи:



16 комментариев к “Плагин и скрипт выезжающей панели на jquery”

  1. Эх. Ждал именно как у вас окошко. Эти плагины — не то.
    Конечно можно перелопатить и тот и тот под себя, но то, что у Вас стоит — просто идеально мне подходит =)

    • ETNO:

      а что не устраивает в плагинах? как раз там более простая интеграция + оформление окошка вынесено отдельно в css, а значит можно настроить его таким же как и мое. В отличие от моего окошка, большая часть настроек которого делается внутри скрипта, что неудобно

      • Да тоже самое на самом деле, что ваш ковырять, что эти.
        Ну первый только шорткодами пользоваться, если нужны ссылки в окошке. Автор ещё не сделал через виджет. Последний коммент от него в Ноябре 2010 про то, что будет в новой версии и до сих пор нет.
        Второй плагин буду ковырять скорее всего — больше похоже на то, что нужно.
        Мне, к примеру, всего-то нужно Ссылку на подписку вставить да текста какого написать информационного. Но с этими плагинами нужно всё перелопатить к виду типа как у вас т.к. изначально совсем не то. Да не суть =) Разберёмся.

        • ETNO:

          так а что там лопатить? slide note — точно такой же функционал имеет, но в отличие от того, что стоит у меня, весь его внешний вид делается обычной версткой и css, в сам скрипт лезть вообще не нужно. Если очень нужно — то я могу выложить и свой, но устанавливать его просто не удобно

  2. Да, мне тоже очень понравилось как у Вас сделано, попробывал slide note установить, сам плагин работает, но css в нём настроить почему то нельзя. Написано, что CSS (отключён) при попытке отредактировать сам плагин. А как его включить не знаю

    • ETNO:

      в крайнем случае можно посмотреть что там за стили и вставить нужные в файл стилей темы с припиской !important — тогда они перебьют стили плагина

  3. alex:

    Здравствуй, а можно выкинуть сам плагин slide note, а то не могу его найти или желательно подробно рассказать, как подключали это всплывающее окошко на своем сайте. Заранее спасибо.

    • ETNO:

      в статье есть ссылка на плагин slide note. И то, что у меня на сайте, это не он, у меня ручная функция, без плагина. Я напишу статью как его делал — это будет следущая как раз. Но если вы не имеете хотя бы базовых понятий и html, то врядли получиться установить. Но все шаги постараюсь описать подробно. К след выходным точно статью напишу

  4. alex:

    спасибо за оперативность. кстати, нашел похожий плагин wp-mk.

  5. alex:

    http://fleek.org/fleekaj/WBVNEgxMS08JSgBJEwdKQhdaFlVOUE0RUVkASUldQAFZD0pNQRNJVQNdFlIAFhY=/ — держите, вот только с ним возникла проблема: на локальном хостинге работает отлично, но когда закачиваю файлы на сервер ничего не появляется, а в консоле браузера выдает такую ошибку: 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 — может подскажите что это и как это решить?

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›