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

С помощью этого кода можно создавать любые веб-элементы на странице сайта: галерею изображений, просмотрщик рисунков, фотогалерею, и т.д.. Всё равно! Назвать его можно по-любому, как угодно - суть одна. Это лёгкий просмотрщик изображений .

Примеров несколько, и сделаны они с использованием, хоть и у каждого примера своего, но 1-ого типа javascript-кода , который работает в обычной HTML-таблице , и даже(!) БЕЗ участия CSS!

Prim* В качестве фонового, т.е. "стартового" изображения для каждого из примеров, я определил: изображение №1 .

Сначала самое простое. Изображения в выделенной рамке будут меняться при клике по ссылкам слева.

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

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

Здесь пробую запустить ещё одну такую же функцию
Единственное отличие - убрал 2-ух пиксельную рамку у таблицы.

Хотелось проверить, как будут работать 2 одинаковых скрипта на 1-ой странице.

Работают! НО!
Нужно обязательно(!) дать . Иначе - перестают работать ОБА ПРИМЕРА! И первый, и этот.

Здесь запускаю ещё одну точно такую же функцию вывода изображений, при клике по ссылкам.
Только вместо названия ссылок вставил разноцветные картинки .

Работает аналогично! И!
Не забывать! Так же нужно давать другие имена функции и примеру .

Здесь запускаю ту же самую функцию вывода изображений, как и в предыдущем примере, при клике по картинкам-ссылкам .
НО! Здесь изменил таблицу , добавив нижнюю строку, т.е. изменил расположение этих картинок-ссылок.

ВАЖНО!

НЕ забыть(!) поменять местами строчки таблицы , и "стартовая" картинка должна быть в начале таблицы , и убрать тэг BR у кнопок.

Этот пример просмотрщика изображений немного особенный . Составил его из СБОРНЫХ ИЗОБРАЖЕНИЙ, и первым, "стартовым", сделал изображение №0 .

Не стал менять "кнопки" ссылок, но подключил к ним уже другие рисунки , и что особенно интересно(!) , разных размеров.

И в этом примере всё срабатывает ОТЛИЧНО! ОДНАКО! Нужно обязательно учитывать некоторые особенности .

Особенно важно! Размер (ширина) подключаемых для просмотра изображений.

В моём случае, а я использую "жёсткую" вёрстку , максимальная ширина должна быть не более 772 px . Иначе страница будет растягиваться !

Такой размер является максимальным из-за того, что ширину главной обёртки (#wrapper) я установил: max-width=800px , а главная таблица сайта (#content) имеет отступы - атрибут "cellpadding" , равный 10px с каждой стороны , и кроме того - 2-ух пиксельную рамку .
В сумме отступы и рамка дают: 24 px . Это нужно учитывать!

Проверив НЕОДНОКРАТНО(!) , выяснил, что обязательно(!) нужно давать ещё запас по 2 px с каждой стороны .
Иначе страница всё равно будет , хоть и немного, но "расслаиваться"!

* * *
Другие размеры веб-страницы - другой расчёт максимальной ширины изображений!

Как видно из приведённых выше примеров работы javascript-кода просмотрщика, всё срабатывает отлично!

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

Вот он - код просмотрщика изображений . Красавец!

function primimages1(a){document.example1.src=a;}

Запуск же функции просмотрщика производится одинаково в каждой ссылке . Меняется лишь адрес картинки . Ну, а принцип написания подобной команды вывода выглядит следующим образом:

Ссылка на рисунок №1

*Prim. Опробовал, испытывая этот javascript-код, разные форматы изображений . Всё работает великолепно! Однако(!) , если в код вписать адрес веб-страницы , то работать он НЕ БУДЕТ!

Испытал и показал на этой учебной, тестовой странице написание и возможности такой интересной функции javascript-кода.

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

Однако же, есть и другие, пусть и не такие простые, но тоже очень интересные способы организации просмотра изображений на своём сайте.

Посмотреть и проверить их можно в их собственных разделах
(будут открываться в новом окне).

Есть и ещё довольно интересная возможность организации смены изображений на своём сайте с помощью создания вкладок . Вот так: "HTML+CSS Вкладки для сайта" .

Ну, и ещё один просмотрщик изображений, но, правда, уже автоматический "живёт" в разделе "Слайд-шоу на JavaScript" .
Для его превращения в обычный , достаточно нажать кнопку СТАРТ/СТОП .

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

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

Благодаря сообществу jQuery существует огромное количество плагинов лайтбокса, что создает прекрасные возможности для дизайнеров по работе с изображениями. В нашем уроке представлены 15 различных плагинов, на которые стоит обратить внимание.

TopUp - простая в использовании библиотека JavaScript для ненавязчивого вывода изображений и веб страниц. Библиотека управляется через jQuery и jQuery UI для обеспечения кроссбраузерной совместимости и компактности.

Highslide - специальный инструмент для просмотра изображений, медиа и галерей.

Маленький настраиваемый плагин для jQuery 1.3+.

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

prettyPhoto поддерживает не только изображения, но и видео, flash, YouTube и Ajax. Лайтбокс для медиа файлов.

Slimbox 2 - клон Light box 2 размером 4 KB, реализованный с помощью jQuery.

Shadowbox - веб приложение для просмотра медиа файлов, которое поддерживает все популярные форматы. Shadowbox написано на JavaScript и CSS, и имеет хорошие возможности настройки.

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

Другие замечательные возможности: автоматическое изменение размера изображения и поддержка технологии "перетащи и брось".

GreyBox можно использовать для вывода веб сайтов, изображений и другого содержания.

Super Box - плагин, который выводит окна с эффектом лайтбокса.

UPD 2014-02-14

Помните, я полгода назад поделился скриптом для просмотра фотографий ? Я ещё хвалился, что он мало весит, быстро работает и вообще он красавчик. Действительно ли это так, можно судить разве что со стороны, а я дам вам ещё пару доводов в пользу скрипта. Сегодня предлагаю вашему вниманию его усовершенствованную версию – quickBox 0.2 .

Чуть более, чем все пользуются скриптами, ставшими традиционной нормой. Если где-то есть скрипт зума, то это в половине случаев SlimBox или LightBox . Вместо 6 файлов, которые требуются для LightBox , мой скрипт требует всего два: один CSS и один JS . Для его работы не нужны картинки, а фотографии он предзагружает перед выводом на экран и весит при этом 6,5 Кб.

Вот его основные характеристики:

• никакой графики, всё построено на HTML+CSS
• для работы требуются два файла +
• управление стрелками “влево”, “вправо” и кнопкой Esc (работает как в Win, так и MacOS). Увеличив фотографию, можно перейти к следующей или предыдущей, нажав курсор на клавиатуре, а чтобы закрыть окно – Esc или ссылку “Закрыть” сверху справа.
• автоматическое построение галерей: если на странице больше одной фотографии, которую вы хотите открывать для увеличенного просмотра, скрипт автоматически создаст галерею и выведет список картинок сверху слева. Такого ни LightBox, ни SlimBox не умеют.
• если для фотографий заполнены атрибуты title, они автоматичеки будут отображаться под каждым фото в качестве описания.
• скрипт проверяет, подключён ли jQuery и если нет, то загружает

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

Увидеть скрипт в работе вы можете на .

Установка занимает 1 минуту. Вам потребуется загрузить файлы в любую папку на вашем хостинге через ftp.

Загружаем содержимое архива в корневую папку /js/. В head документа перед закрывающимся тегом прописываем строку:

Если у вас не подключён jquery, просто загрузите его по адресу: /jquery.js . А для того, чтобы скрипт мог обрабатывать ваши фотографии. нужно добавить им атрибут: class=’quickbox’. В качестве примера вот вам 4 фотографии:

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

» PHP скрипты галереи картинок

Coppermine – это разносторонняя, много функциональная web галерея картинок написанная на языке PHP, с использованием GD или ImageMagick, а так же базу данных MySQL.

| v.1.5.24 | Скачано: раз

Отличный, простой скрипт фото галереи. Просмотр картинки Full Size в новом, открывающемся окне, авто генерация превью (thumbnail) и многое другое в этом пакете Maian Gallery.

| v.2.0 | Скачано: раз

KoschtIT Image Gallery – это бесплатный и открытый код (open source) PHP скрипта фото галереи. Программа используется для быстрого добавление PHP галереи картинок на уже существующий веб сайт.

| v.3.1c | Скачано: раз

Max"s PHP Photo Album – это простой, легкий в использовании PHP скрипт Фото Альбома. Вы можете загружать картинки на ваш сервер, добавлять название/тайтл и описание вашим фото файлам, защитить файлы от просмотра паролем и другие стандартные функции.

| v.1.0 | Скачано: раз

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

| v.2.0 | Скачано: раз

Simple Gallery – это самая легкая система управления галереи картинок написанная на языке PHP, которая использует jQuery, MySQL и библиотеку GD Library.

| v.1.3 | Скачано: раз

Plogger – это php скрипт галереи картинок принципиально нового поколения с открытым для редактирования кодом. PHP программа не раздута каким-либо лишними функциями или сложной настройкой.