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. Отрефрешьте страницу своего сайта в любимом браусере