ГАЛЕРЕЯ

О галереях

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

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

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

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" (откроется в новом окне).

А ещё, уверен, создание простых, и также без всяких скриптов вкладок для сайта Вам тоже будет интересно.
Хоть это и не фотогалерея, но превратить их в галерею проще "пареной репы". Раздел об этом здесь: "HTML+CSS Вкладки для сайта" (откроется в новом окне).

И, наконец, несколько самых похожих, на показанные здесь галереи рисунков, да к тому же - работающих даже(!) без CSS, но очень удобных, лёгких и быстрых, Вы можете посмотреть в разделе "Просмотрщик изображений" (в новом окне).

* * *

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

ВВЕРХ