Галерея
Данный пример объекта на сайте представляет собой галерею. Он создается с помощью простых приемов javascript программирования, связанных с возможностью переопределять параметры тегов. Это очень сильная возможность, которая позволяет языку javascript формировать HTML код любой степени сложности динамически, то есть так, что исходного кода практически не видно, он весь вычисляется. Но часто можно существенно упростить код за счет того, что использовать массивы отнотипных определений и потом автоматически вставить их в нужные теги. То есть при записи файла переписывать теги много раз не придется. Такая форма удобна еще и для приготовления шаблонов сайта. Можно сделать шаблон таким образом, что от пользователя запрашивается только очевидная информация в виде адресов картинок и текстов. Весь остальной код работает полностью универсально и его не надо каждый раз переписывать. В данном примере исходными являются картинки, представляющие собой некий массив. Картинки большие и все на сайте не помещаются. Тогда мы делаем маленькие копии картинок и размещаем их в ряд, а внизу ставим одну большую картинку. Однако при наведении курсора мыши на какую нибудь маленькую картинку ее большая копия появляется на месте большой картинки. Таким образом, мы можем просмотреть все большие картинки по очереди, экономя место на сайте. Фактически мы получаем картинную галерею, но нам не надо много пустых стен в больших комнатах. Достаточно иметь мышь и знать javascript. Сначала, как обычно, я просто покажу текст тестового сайта, содержащего программу галереи. Этот текст можно скопировать в файл с расширением htm и запустить на исполнение, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь я объясню пример. Первые теги достаточно очевидны. В теге <style> записаны параметры тега body, главной области div с id=main, а также два класса im и ims. Далее идет тело сайта, в котором внутри главной области записан заголовок и 5 картинок. Первые 4 картинки задаются только с параметрами id и onmouseover, оба параметра уникальны для каждой картинки. Более того, есть согласованность, аргумент функции совпадает с последней цифрой кода id. Это необходимо для того, чтобы можно было сгенерировать id код по аргументу функции. У последней картинки явно указаны все основные параметры. Вот и все. А дальше идет javascript код, в котором задана стандартная функция geid, уже обсуждавшаяся в предыдущих примерах. Вторая функция ini своим названием говорит, что она вызывается только один раз в самом начале. В ней определен массив из 4-х текстовых значений, являющихся адресами картинок в интернете. А затем в цикле рассматриваются все элементы с параметрами id заданного типа, у которых изменяется только последняя цифра. Поочередно определяется указатель de на такой тег и затем функцией className ему присваивается параметр class='im'. А затем присваивается параметр src со значением, равным адресу очередного элемента массива. Я немного неправильно называю функцией параметр CSS, просто его запись точно такая же как и у функций. Именно эта функция позволила нам не писать 4 раза clacc='im' и не писать src="адрес". А все адреса мы записали перечислением. Такую запись легко сможет сделать любой пользователь, даже не знающий технологий интернета.
Осталось написать функцию, которая выполняет реакцию на событие hover по терминологии CSS. Она очень простая, у пятой картинки переопределяется ее адрес по номеру в аргументе функции. Проще просто некуда. Затем запускается функция ini и все дела. Оcталось только обсудить детали. Иконки картинок позиционирутся относительно. Но у нас фиксирована рабочая область так что на всех компьютерах это будет делаться одинаковым образом. А вот большая картинка позиционируется абсолютно. Естественно ее координаты будут зависеть от того, сколько картинок размещено в галерее и какого размера. Можно разместить один, два три ряда. В каждом случае координаты легко вычисляются, а окончательную доводку можно провести визуально. Могут быть всевозможные модификации кода. Так инонки картин можно перемещать внутри заданной области, так что каждый раз будет видна только часть иконок, а можно их листать постранично по кнопкам налево или направо. При этом код несколько усложняется, но все равно все очень просто. Возможно я расмотрю такие модификации позже. Ну и я уже не говорю, что можно добавить рамочку, комментарии к каждой картинке в виде текста и даже голосом. Это немного сложнее, но тоже возможно. Говоря откровенно, я не люблю галереи, мне больше нравятся автоматические слайд-шоу. Но любителей галерей не так мало. Галереи также любят делать с помощью jquery наворачивая горы javascript кода, хотя реально все очень просто, а разные красивости в виде плавных переходов -- просто пижонство.
Автор: Виктор Кон, 9.09.2013
