Логотип Валидатор Валидатор Качество создания сайта

ГАЛЕРЕЯ

О галереях

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

Решил не отставать от своих коллег, и тоже создал фотогалереи моих работ в программе "Фотошоп". Не всех, разумеется, а по нескольку из разных тематик.

Фотогалерея

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

HTML+CSS только!!!

Вы могли видеть работу 2-ух фотогалерей, созданных с помощью jQuery, если были на страницах, посвящённых изучению этой технологии.
Нет?
Повторю ссылки:
"jQuery Фотогалерея" и "jQuery Галерея 2" (откроются в новом окне).
Сможете сравнить их и решить, какая больше нравится.

А ещё, очень рекомендую посмотреть галереи, которые я сделал, применив всего лишь одну строчку JavaScript.
Интересны они тем, что весьма удобны для использования, а вся основа - чистые HTML, либо HTM. Найдёте их здесь: "Галерея на JavaScript" (откроется в новом окне).

Только не забывайте об ОГРОМНОМ(!) достоинстве этих, которые разместил здесь. Напомню ещё раз. Галереи созданы без скриптов, на одних лишь HTML+CSS!

Вопрос Почему так акцентирую Ваше внимание на этом факте, надеюсь, хорошо понимают те, кто посетил страницу "Современные технологии" (откроется в новом окне), ну а если коротко: мало кода.

И, кроме всего прочего, их "блок управления" занимает совсем незначительное место на странице. Впрочем, смотрите сами.

Галереи на языке HTML

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

- пользоваться очень легко -

Наведите курсор мыши на мини-кнопку, появится подсказка, что за ней находится. Нажмите на кнопку - картинка откроется в новом окне.

Галерея 1 (основная)

* * *

Как видите, панель управления галереей действительно занимает совсем мало места, хотя она "вмещает" в себя 24 рисунка.
Очень просто увеличивается. Это не сложнее, чем сделать кнопку на сайт.

Кого интересует, как ещё можно создать фотогалерею на сайте, посмотрите нижние.


Галерея 2

- пользоваться ещё легче -

Наведите курсор мыши на кнопку, она превратится в миниатюру вставленного рисунка. Нажмите на кнопку - сначала появится символ загрузчика, затем картинка откроется в новом окне.

* * *

Вторая, из представленных галерей, конечно, сложнее первой из-за фоновых картинок и большого количества CSS-кода.

А ещё, здесь много времени тратится на подготовку каждой миниатюры изображения в программе "Фотошоп".
Правда, из-за всего этого она и посимпатичнее первой.

Честно говоря, вовсе необязательно было, ставить на фон картинки: "знак вопроса" и "загрузчик" (появляется при клике), но ... ... . Это всё же одна из страниц моего портфолио.


Галерея 3

- работает без перезагрузки -

Наведите курсор мыши на миниатюру, она превратится в полный рисунок.
Кликните по рисунку - он снова станет миниатюрой.

* * *

Для написания кода представленной галереи фотографий, пришлось использовать элементы JavaScript, да и то, напрямую в HTML-коде страницы. Что это значит?

Повторяться не буду. Кого интересует, смотрите на страницах: "Кнопки для сайта" и "Псевдоселекторы" (откроются в новом окне).

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

Однако, на мой взгляд, она и наиболее привлекательная из всех здесь показанных, если стоит задача, создать HTML-галерею для сайта.

P.S.* При большом количестве миниатюр удобнее прописать в коде, чтоб они открывались по клику, а не при наведении. Ну, это, сами понимаете - "дело техники". Здесь я просто показал принцип такого способа.


Фотогалереи 4 и 5

- самые простые -

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

Подобный тип, назовём его "галерея из фреймов", легко создаётся, благодаря отличным возможностям тэга <iframe> показывать другую страницу в себе.
Вот. Смотрите.

Видите?
В окошке видны картинки, которые прописаны не на этой странице, а на другой, "фреймовой".

Удобно. Размерами окна управляем с этой, а тем, как будут рисунки отображаться, с "фреймовой".

Ниже, в принципе, такая же галерея, но уже с надписями над и под картинками.

* * *

И как? Понравилось?
Разумеется, размер последней галереи фотографий зависит от их размера, от того, что Вы хотите показать.
Однако, её неоспоримые достоинства трудно не заметить. А самые главные из невидимых - отсутствие скриптов и мало кода!

* * *

Заключение

Надеюсь, представленная информация, как можно просто сделать фотогалерею на сайте, была Вам интересна.
По крайней мере, думаю, убедительно показал, что для создания и подключения галереи на своём сайте, совершенно необязательно писать какие-либо сложные скрипты.

HTML+CSS только!!!

Немного подробнее о технологиях, какие применял для их создания, можете посмотреть на страницах: "Псевдоселекторы" и "Техника спрайт" (откроются в новом окне).

Кого интересует, как создать простое, без скриптов слайд-шоу для сайта, найдут много интересного в разделе "Слайд-шоу на HTML" (откроется в новом окне).

* * *

Сделал прямой заход на эту страницу из двух БОЛЬШИХ разделов. Вернуться также можно прямо. Наведите курсор мыши на стрелки - появятся подсказки, куда они ведут.
Кликнув по верхнему логотипу, попадёте на "Главную".

На сайты Куда? В фотошоп

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru