GFNS, Webdesign. JS трюки

Галерея картинок с переключением на тач скрине, мышью, с клавиатуры

Автор - Sergej Qkowlew
скачать gallery.js размером 24 килобайт


*Ссылка не на картинку галереей не обрабатывается даже если внутри неё есть маленькая картинка

обсуждение на DreamWidth или в ЖЖ, на Golos.io

Зачем это нужно

  1. Есть статический html, в котором внутри a href на большую картинку лежит img src маленькой
  2. Хочется чтобы большая картинка по клику открылась "в размер окна браусера"
  3. Хочется чтобы посетитель мог листать ВСЕ картинки на данной странице любым из способов:
    1. стрелки вправо-влево, ESC - выйти из листания
    2. колёсико мыши
    3. при наличии тачскрина - свайп влево-впаво или вверх-вниз, тап - выход
    4. клики мышкой по правому-левому краям картинки, крестик - выход
    5. стрелочки и крестик выхода должны появляться только при движении мышью в соответствующее место, не "заслоняя" картинку
  4. Единственный файл и максимально простая инструкция установки на сайт
  5. Отсутствие привязки к каким либо другим скриптам, в частности jQuery
Данный скрипт делает именно это и ничего более. Попробуйте на примере справа.

Как добавить скрипт на сайт

  1. Залейте файл gallery.js в подкаталог /js/ Вашего сайта
  2. Скопируйте нижеприведённый текст в html файл вашего сайта перед </head>
  3. Отрефрешьте страницу своего сайта в любимом браусере
  4. Попробуйте нажать на любую из картинок на странице вашего сайта
  5. Возможно, некоторые параметры стиля сайта вам придётся подправить из-за тонкостей взаимодействия с галереей
  6. Для правильного отображения на мобильных экранах полезно добавить перед </head> также строку

Скрипт применили


Выводим линк на текущий пункт меню и его подраздел другим цветом

Автор - Sergej Qkowlew
скачать active.js размером 1017 байт
Главная страница сайта
Подраздел сайта в котором лежит эта страница
Текущая страница

Зачем это нужно

Чтобы упростить серверную часть кода сайта и снизить нагрузку на сервер. А также чрезвычайно облегчает работу, если вы пишете сайт на статическом HTML или с применением простых темплейтов.

Как добавить скрипт на сайт

  1. Залейте файл active.js в подкаталог /js/ Вашего сайта
  2. Скопируйте нижеприведённый текст в html файл вашего сайта перед </head>
  3. Добавьте в стилевой файл вашего сайта строки с желаемым отличием цветов и оформления выделенных пунктов меню:
    .active { color: grey; background: white; }
    .subactive { color: red; background: yellow; }
    
  4. Отрефрешьте страницу своего сайта в любимом браусере
// (x) 2018 Sergej Qkowlew Public domain Сергей Яковлев написал сие для всех.
// .active class for a of current page,  Ставит текущему линку класс  .active
// .subactive css class for  a  'upper'  Линку на подраздел ставит .subactive
// link detected by pathname structure.  (подраздел по структуре пути в URI).

window.addEventListener('load', function(){
if (window.location.pathname != '/') {
 SqAct=window.location.href ;
 SqLen=window.location.href.length ;
 SqSub=window.location.href.substring(0, window.location.href.lastIndexOf('/')+1);
 if (SqSub == SqAct) {
  SqSub = SqAct.substring(0,SqAct.lastIndexOf('/', SqLen-2)+1);
  }
 SqAs=document.getElementsByTagName('A');
 for (i=0; i<SqAs.length; i++) {
    if (SqAs[i].href == SqAct) {
        SqAs[i].classList.add("active");
        }
    if (SqAs[i].href == SqSub) {
        SqAs[i].classList.add("subactive");
	}
    }
 }
}, false) // end window.onload


Ищем на нашем сайте Яндексом

Автор - Sergej Qkowlew
скачать search.js размером 993 байта

Зачем это нужно

Если ваш сайт целиком проиндексирован поисковиком Яндекса, все тексты на нём можно найти внешним поиском, а не внутренними средствами сайта. Чрезвычайно облегчает работу, если вы пишете сайт на статическом HTML или с применением простых темплейтов.

Как добавить скрипт на сайт

  1. Залейте файл search.js в подкаталог /js/ Вашего сайта
  2. Скопируйте нижеприведённый текст в html файл вашего сайта в то место, где вы намерены расположить формочку поиска.
  3. Отрефрешьте страницу своего сайта в любимом браусере


Позволяем пользователю сайта отключать рекламу

Автор - Sergej Qkowlew
скачать advertoff.js размером 4703 байта

Зачем это нужно

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

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

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

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

Кроме того, в скрипте специально предусмотрено то, что если пользовтель не совершил сознательного действия по изменению настройки "показывать рекламу или нет" - то в куки настройка не записывается.

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

Как добавить скрипт на сайт

  1. Залейте файл advertoff.js в подкаталог /js/ Вашего сайта
  2. Скопируйте нижеприведённый текст в html файл вашего сайта в то место, где вы намерены разместить рекламу
  3. Отредактируйте в начале этого файла строку Ibanner в которой укажите местонахождение текстового или HTML файла с рекламой
  4. Отрефрешьте страницу своего сайта в любимом браусере