Создайте захватывающую фотогалерею с MooTools

Библиотеки JavaScript, такие как MooTools, могут сэкономить много времени при разработке сайта. В этом уроке я покажу вам, как объединить многие функции MooTools для создания красивой фотогалереи.

Шаг 1 — Настройка HTML, CSS и MooTools

Прежде чем начать, посмотрите на демо. Будет легче понять цель каждого шага, если вы знаете цель.

Сначала создайте простой файл HTML и добавьте ссылку на таблицу стилей (main.css) и два файла JavaScript (mootools.js и main.js). Создайте эти файлы в том же каталоге. Затем перейдите в MooTools Core Builder . Выберите все компоненты и нажмите «Скачать». Это загрузит mootools-1.2-core.js. Скопируйте содержимое этого файла в файл mootools.js. Затем перейдите в MooTools More Builder, выберите все компоненты и нажмите «Скачать». Скопируйте содержимое еще раз и вставьте его в конец mootools.js.

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

Шаг 2 — Создайте макет

Теперь нам нужно создать макет для нашей фотогалереи, используя HTML и CSS. Добавьте следующий код в теги body вашего HTML-файла.

Это создает контейнер для окружения всего кода на сайте, заголовка, раздела для изображений и элементов управления для сайта. Почему все пустые теги img? В CSS ниже мы даем им размеры и другой цвет фона, поэтому мы можем протестировать галерею без необходимости добавлять и изменять размеры реальных изображений. Теперь мы добавляем CSS в файл main.css.

Вот как это выглядит при применении.

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

Теперь давайте добавим наложение, которое будет показывать большие изображения. Сначала добавьте следующий код прямо перед закрывающим тегом body в вашем HTML-файле.

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

Это создает этот эффект:

Большое изображение появится там, где находится div (теперь невидимый) display_picture_img (под кнопкой «Нажмите на изображение», чтобы вернуться к тексту галереи).

Шаг 3 — Сбор и изменение размера ваших фотографий

Это хорошее время, чтобы собрать все ваши фотографии и изменить их размер. Прежде всего, создайте папку «картинки» и папку «большие пальцы». Добавьте все свои изображения в папку с изображениями и назовите их 1.jpg, 2.jpg, 3.jpg и т. Д. Измените их размер до размера display_picture_img div: 530 пикселей в ширину и 272 пикселя в высоту. Затем скопируйте эти файлы в каталог thumbs и измените размер этих копий до 111 пикселей в ширину и 57 пикселей в высоту. Неважно, сколько фотографий у вас есть. Тем не менее, я бы рекомендовал использовать более 26 для этого урока, чтобы вы могли использовать вертикальную прокрутку.

Шаг 4. Добавление функциональности с помощью MooTools

Первое, что нужно сделать, это удалить все теги <img src = «#» /> в файле HTML. Это были только заполнители; мы добавим файлы с JavaScript позже. Теперь мы сделаем наложение исчезнет при загрузке страницы. Добавьте следующий код в файл main.js

Вот как это выглядит:

Чтобы объяснить это, давайте начнем с низу. В MooTools код window.addEvent выполняет код внутри, когда DOM готов к визуализации элементов. $ (‘Display_picture_container’). Fade (‘hide’); скрывает элемент display_picture_container и все его содержимое. Я использовал метод fade (‘hide’), потому что мы будем использовать его позже. Мы не создаем показ: нет; оператор в нашем CSS-файле или JavaScript должен скрывать его таким образом; он должен быть скрыт функцией, которую мы собираемся использовать, чтобы показать ее позже (исчезать).

Теперь по большей части: функция show_pictures. Прежде всего, мы устанавливаем переменную number_of_pictures. Это говорит функции добавлять миниатюры из папки thumbs, используя каждое целое число от 1 до заданного числа. Чтобы добавить больше изображений в это слайд-шоу, все, что вам нужно сделать, это добавить их в папки, изменить их размер и увеличить значение number_of_pictures. Я использовал 32.

Следующая часть — это внутренняя работа show_pictures. Это, как следует из названия, показывает все картинки. Он также предварительно загружает большие картинки в фоновом режиме. Внутри функции while_pictures определено как 1. Это переменная, которую мы будем использовать в качестве отправной точки для отображения всех изображений. Следующий оператор while показывает, что код внутри будет выполняться один раз для каждого изображения, начиная с одного и заканчивая общим количеством изображений (number_of_pictures). Обратите внимание, что while_pictures ++; находится в конце цикла while, чтобы увеличить его на единицу каждый раз, когда цикл повторяется.

Далее мы создаем экземпляр Element для элемента img. Мы можем добавить атрибуты src, id, class, event и другие. Однако нам нужны только src, id и events. Используя ‘src’: ‘thumbs /’ + while_pictures + ‘.jpg’, мы заявляем, что хотим, чтобы src изображения был таким, каким является текущий номер oru, и внутри папки thumbs. Идентификаторы для всех наших миниатюр будут image_1, image_2 и т. Д.

Теперь мы хотим, чтобы после нажатия на миниатюру появилось большое изображение, поэтому мы создаем событие щелчка. Первая строка под этим делает display_picture_img div contian большим изображением с идентификатором big_picture и классом идентификатора миниатюры (image_1, image_2 и т. Д.). Помните, что в настоящее время div display_picture_img скрыто.

Теперь используйте метод .fade (1), чтобы добавить в div display_picture_container и все его содержимое. 1 представляет уровень непрозрачности (1 — 100%, .5 — 50% и т. Д.). Однако это вызывает ошибку во всех браузерах, кроме новейших, таких как Firefox 3 и Safari. Они появляются правильно, но другие просто появляются на изображении и исчезают в более темной области вокруг него. После долгих экспериментов я обнаружил, что если изображение большого размера (с идентификатором big_picture в качестве его идентификатора) исчезает с помощью собственного метода постепенного изменения, оно работает, но только в том случае, если для параметра плавного перехода не установлено значение 1. Однако нам нужна картинка быть на 100% непрозрачности. Поэтому я установил его на .999999, который не имеет заметной прозрачности.

Так что теперь большая картинка на экране. Однако мы также хотим, чтобы элементы управления переместились в центр и стали стрелками влево и вправо вместо стрелок вверх и вниз. Прежде всего, мы скрываем вертикальные элементы управления (controls_vert). Мы можем использовать дисплей: нет; для этого, потому что мы не собираемся исчезать или исчезать. Затем мы используем операторы if, if else и else, чтобы определить, было ли изображение, по которому щелкнули, первым или последним в нашей галерее. Если это был первый, мы не хотим, чтобы он мог идти влево, потому что предыдущего не существует. То же самое необходимо справа. Позже, когда у нас будут работать стрелки влево и вправо, мы обнаружим, есть ли у него деактивированный класс. Это определит, будет ли событие щелчка работать для него. (Также ознакомьтесь с CSS. Он устанавливает изображение стрелки на 20%. Это избавляет от необходимости иметь 8 изображений стрелки направления вместо 4.)

Далее мы отображаем горизонтальные элементы управления, устанавливая его стиль отображения на блокировку. Итак, скрывая вертикальные элементы управления и показывая горизонтальные элементы управления, мы просто отключили их. Однако мы хотим, чтобы горизонтальные элементы управления были центрированы. Я достиг этого, создав анимацию, которая оживляет увеличение левого поля до 286 пикселей, который является центром галереи.

Теперь, когда мы создали наш new_image, мы должны поместить его в документ. Метод inject позволяет нам вставить вновь созданный элемент img во внутренний div.

Мы также хотим предварительно загрузить каждое из изображений, чтобы не было никаких задержек, когда люди фактически щелкают по изображениям, чтобы затемнять их. Мы создаем новый элемент img для каждого полноразмерного изображения. Однако он использует класс hide, который в нашем CSS использует display: none; скрыть содержимое. Затем мы вставляем скрытое изображение предварительного загрузчика в контейнер div.

Вот как это выглядит после нажатия на миниатюру:

Теперь мы должны сделать так, чтобы картинка исчезла при нажатии на нее. Вставьте следующий код после $ (‘display_picture_container’). Fade (‘hide’); заявление в main.js.

Это добавляет событие щелчка к div, содержащему большое изображение. При щелчке контейнер исчезает до нуля, и из-за вышеупомянутой ошибки само изображение также исчезает до 0. Затем мы устанавливаем скрытый элемент div так, чтобы у него был такой же более высокий край слева, как у левого элемента div. Затем мы мгновенно переключаем горизонтальные элементы управления обратно на вертикальные элементы управления, а затем, после установки скрытого левого div обратно на исходное левое поле, мы анимируем левое поле стрелки вверх до исходного 7px, используя другую анимацию движения. Теперь вы можете нажать на миниатюры, чтобы взорвать их, а затем нажмите на большое изображение, чтобы скрыть его снова. Почти сделано!

Теперь возьмите следующий код и вставьте его над только что введенной вами кодой.

Первое, что мы сделаем, это настроим вертикальную прокрутку. Прежде всего, мы создадим переменную с именем vertical_moves со значением 0. Это скажет нам, на сколько строк она сдвинулась вниз. Затем мы узнаем, сколько строк изображений у нас есть, с 5 изображениями подряд. Функция Math.ceil округляет любое число от десятичного до целого. Например, у меня есть 32 изображения. 32, деленное на 5, равно 6,4, что будет округлять до 6. Однако мы все еще хотим, чтобы показывались дополнительные изображения; несмотря на то, что в последнем ряду всего две картинки, мы хотим, чтобы они считались как целый ряд. Поскольку Math.ceil округляет все это, количество строк становится равным 7.

Затем мы обнаруживаем, есть ли более пяти строк. Если нет, мы отключаем стрелки вверх и вниз. При пяти строках или менее все изображения отображаются без необходимости использования кнопок прокрутки. Однако, если их шесть или более, мы хотим добавить к ним события. Для div стрелки вверх мы добавляем событие и затем определяем, было ли оно помечено как деактивированное или нет. Если он деактивирован, он будет отображаться с непрозрачностью только 20%, и когда вы нажмете на него, он ничего не будет делать. Кроме того, у него больше не будет указателя в качестве курсора. Однако, если у него нет этого класса, он продолжается. Если вы идете вверх, он уменьшает количество пройденных вами строк вниз, поэтому vertical_moves уменьшается на одну строку. Затем он стирает любой класс, который есть у down div. Если он находится в нижнем ряду и стрелка вниз деактивирована, то после перемещения вверх по ряду он сможет снова двигаться вниз. Следовательно, он мешает его деактивации.

Затем он заставляет все миниатюры двигаться вверх, обнаруживая, что такое новый vertical_moves, умножая его на 64 и делая его отрицательным. Число 64 используется, потому что это высота ряда миниатюр плюс поле под ним. Затем он применяет это значение к верхнему краю. Например, если маржинальная вершина изначально была -128px, она будет двигаться вверх, потому что новая маржинальная вершина будет только -64px. Метод анимации превращает его в новую позицию. Внутри файла main.css у него есть div picture_section, скрывающий переполнение. Это так, что когда вы применяете отрицательную верхнюю границу, она прячет ее, а не торчит. Затем она определяет, находится ли она наверху галереи. Если это так, он деактивирует стрелку вверх, поэтому он не может идти дальше. Стрелка вниз применяет те же действия, кроме обратного.

Теперь мы сделаем правильную работу левой и правой кнопок. Прежде всего, мы устанавливаем current_id равным единице, чтобы создать переменную. Это поможет нам определить, какое большое изображение отображается (помните, левая и правая кнопки появляются только при отображении большого изображения). Затем мы добавляем событие щелчка к левому элементу div и проверяем, деактивировано оно или нет. Если это не так, мы определяем класс img с идентификатором big_picture. Ранее это было установлено как image_ (введите номер текущего изображения здесь). Мы используем метод get, чтобы найти это, и метод replace, чтобы удалить префикс image_. Затем мы вычитаем его на единицу, потому что, двигаясь влево, мы возвращаемся к изображению с идентификатором, равным одному.

Затем мы мгновенно скрываем само изображение, а затем меняем его src на предыдущее изображение. Затем мы добавляем изображение к 100% непрозрачности. После этого мы меняем класс изображения на его новое значение, что позволяет пользователю многократно перемещаться влево. Затем мы обнаруживаем, что это на самом первом снимке. Если это так, мы больше не можем идти влево, поэтому мы деактивируем левую кнопку. Если после щелчка влево это изображение рядом с последним, это означает, что оно было только на последнем изображении, где правая кнопка была бы отключена. Если это так, мы активируем правую кнопку, чтобы они могли двигаться вперед. Практически идентичные действия применяются к правой кнопке, кроме, опять же, наоборот.

Шаг 4 — Тестирование и оптимизация

Теперь об этом. Большое изображение исчезает, когда вы нажимаете на миниатюру, вы можете перемещаться влево и вправо, возвращаться в основную галерею, нажимая на большое изображение, и прокручивать вверх и вниз. Но ждать! После разработки в хорошем браузере, таком как Firefox, вам необходимо протестировать его в других популярных браузерах, таких как Safari, IE6 и IE7. Я проверил их все, и все они работали, за исключением — сюрприз! — Internet Explorer 6. Когда вы нажимаете на изображение, и горизонтальные элементы управления выдвигаются, они слишком сильно выдвигаются в IE6. По какой-то причине IE6 считает, что все остальные браузеры считают 286px всего лишь 143px. Итак, измените следующий код:

К этому:

Browser.Engine.trident4 возвращает true, если браузер IE6. В противном случае он возвращает false и выполняет исходный код. И следующий код:

К этому:

Теперь это работает во всех браузерах. На этом этапе вы также можете перейти на сайт MooTools и выбрать только те компоненты, которые вы использовали. Хотя mootools.js, main.js, main.css и HTML-файл используют вместе менее 100 КБ, вы всегда можете уменьшить размер, чтобы оптимизировать работу пользователей с более медленным интернет-соединением. Однако я оставил для этого всю библиотеку MooTools в исходном коде, чтобы люди, которые хотят что-то изменить в галерее, могли использовать все компоненты.

И вот оно: рабочая фотогалерея MooTools. Помните, что документация MooTools всегда полезна при разработке сайта с помощью MooTools. Я надеюсь, что это поможет людям, пытающимся объединить многие действия JavaScript в единый сайт.