Главная Учебники по HTML и CSS Статьи про Html Шаблоны сайтов Про Хостинг Заработок Продвижение
Делаем красивый фотоальбом (Light Box)
Этот урок будет посвящен теме создания веб-галерей и размещению картинок на сайте.
Есть несколько стандартных способов, без навортов, как открывать картинку на сайте, в новом окне или сразу размещать в полноразмерной форме, но выглядит это уже старомодно и речь пойдет о совершенно ином способе, по красоте и истетеке который на данный момент является лидером, и при этом не требует особых усилий от разработчика, а именно, эта технология- LightBox .
И так, мы хотим, что-бы маленькая картинка в тексте увеличилась при нажатии, да не в отдельном окне, а изящно, прямо поверх текста. Вот пример, нажмите на картинку,
Нажмите на картинку что-бы увеличить.
Вариант 1 (Вручную)
Если это одна, две картинки на странице, то сделать можно все вручную, в три шага:
Шаг 1) Скачиваем библиотеки и стиль, который затем мы подключим к странице. Все три папки (css, images, js) размещаем в корне, где будет страница с фотографиями. Скачать библиотеки и стиль (официальный сайт разработчика)
2) Затем подключаем пару библиотек и стилей к нашей странице:
3) Делаем уменьшенную копию картинки, кидаем её в папку thumbs, а оригинал картинки в папку photos. Маленькую размещаем на сайте с использованием следующих тегов (при нажатии на неё будет открываться большая):
Все, готово, теперь ваша картинка будет октрываться так:
Нажмите на изображение, что-бы увеличить.
Вариант 2 (Программой, для ленивых)
Если ваша задача создать галерею или альбом, естественно, прописывать каждой картинке атрибуты бессмысленно, поэтому на помощь нам приходят программы, которые это сделают за вас.
Интернет предлагает огромное колличество по созданию галерей lightbox, но многие из них делают на страницах собственного дизайна, вешают рекламу, ставят водяные знаки и делают прочую лабуду. Но конечно есть и хорошие, имеено о них и пойдет речь, а точнее об одной, самой простой, без наворотов, да и бесплатной.
Называется она GalleryCreator.exe (бесплатная программа по созданию lightbox галерей), сразу скажу, что для её функционирования так-же требуется, что-бы на компьютере стоял MICROSOFT .NET FRAMEWORK 2.0. Все эти прогрмы есть в свободном доуступе в интеренете.
Пользоваться ею проще простого- указываете где картинки и куда сохранять галерею, задаете размер маленького изображения (в народе превью), так как она делает галерею в виде таблице, так-же задаете размер таблицы и кол-во сток/столбцов.
Все, жмете Create web Gallery, и получаете альбом в стиле lightbox, быстро, сердито и легко. Но главное её достоинство, то, что она оформляет будущуюю галерею в виде таблицы, и вы можете затем разместить её на своем сайте под свой дизайн без запар.
На сгенерированной странице жмете правой клавишей и выбираете просмотреть исходный код (HTML), копируете нужную информацию и вставляете в свою страницу.
Переносите в корень все папки, которые создала программа, а именно (library, lightbox, photos, thumbs). Теперь на странице с вашим дизайном работает галерея, сделанная с помощью программы.
Главное, разберись с директориями, иначе ничего не будет работать. Так-же данная версия может некорректно работаь в IE 6, проверяйте, если не работает, ищите lightbox 1.0, так как ссылка для скачивания lightbox 2.05.
