Все записи категории ‘javaScript’

Виджетик для сравнения двух картинок
 1 Ноя, 2015

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений можно придумать много : везде, где мы имеем две одинаковые картинки, одна из которых — «до», а вторая «после». Можно, конечно, просто выложить начальное и конечное изображение рядом. Но мне пришла в голову следующая идея (видимо, где то подсмотрел).

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

Виджета у меня пока нет, давайте его сварганим.

Читать далее »

Анимация ожидания загрузки/обновления, используя CSS3
 26 Окт, 2015

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

Читать далее »

Делаем эффект параллакса для заднего фона на сайте
 19 Окт, 2015

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

Читать далее »

Jquery перебор элементов
 18 Окт, 2015

С помощью селектора jQuery мы выбрали какие то элементы. Как теперь организовать их перебор в цикле? Есть пара вариантов.

Читать далее »

Программируем галерею в Drupal 7
 2 Сен, 2015

gal-sample

Хотите сделать галерею своими руками, без сторонних модулей в Drupal? Тогда читайте дальше.

Читать далее »

Ajax в Drupal 7
 31 Авг, 2015

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов.

Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы получать данные облаченные во весь шаблон текущей темы оформления. В-третьих, надо помнить, что в drupal уже подключена библиотека jQuery, так что нам можно использовать реализацию механизма ajax в её составе.

Читать далее »

Раздвигающееся вертикальное меню Drupal 6
 7 Сен, 2013

Эта задача из разряда useability. Drupal может штатно создавать блоки вертикальных иерархических меню.

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

Можно, конечно, сделать какие то ветки меню всегда раскрытыми (expanded). Это подойдет для ряда случаев, когда пунктов меню не очень много (20-30). Если же речь идет о каталоге товаров, то раскрывать сразу всю портянку будет не разумно. А с закрытыми (collapsed) подменю Drupal обходится так, что просто их не выводит в шаблон (раз их не видно), пока они свернуты, и вы не активизировали соответствующий пункт меню.

Читать далее »

Подключаем fancybox в Drupal 6
 1 Сен, 2013

Fancybox — известный плагин jQuery для создания эффекта «просмотра в окошке». Давайте подключим его в 6-ю версию Drupal.

Читать далее »

Украшательства на сайте : делаем надпись поверх картинки
 13 Мар, 2013

Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки причесаны под один формат. «Проблемными» являются изображения внутри статьи. Во-первых, их нужно особо подготавливать к публикации — обрезать, подогнать к размерам, а во-вторых, часто их нужно подписать.

Вот это «во-вторых» мы красиво и сделаем. Читать далее »

Анимация смены картинок с помощью jquery
 26 Дек, 2012

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

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

Читать далее »