История такова: понравился скрипт-плагин, который использовал для показа фотографий в своих отчетах Вадим Ракитин. Написавший скрипт Артем Казаков ( lakka-sails.ru, вот где красота-то!) усовершенствовал его, снабдил приведенной ниже инструкцией и решил:
- Можете делать с ним, что пожелаете - раздавать, переделывать, публиковать.
Что и делаю.
Доп. комментарии со своей стороны:
- Работать надо с форматом html. Используйте в качестве инструмента простой Блокнот (Артем советует какой-либо более продвинутый и удобный для программизма, в частности sublimetext. Но только не Word, ибо он все перекурочит так, что и хакер хрен разберется.
- Приятное отличие этого плагина от прежней версии: действует не на все картинки подряд, а только на те, которые вы захотите распахивать. Какие-нибудь смайлики, плашки, завитушки и прочие элементы графики останутся на странице как и были, сколько по ним не щелкай.
- Можно использовать одни и те же файлы картинок и для показа в высоком качестве, и для превью на странице с текстом. В таком случае размеры превью на странице надо указать явно атрибутами width и/или height (или через стили). Если хочется обеспечить быструю загрузку файла страницы, насыщенной множеством больших объемных фото, можно сделать и отдельные маленькие превьюшки; тогда на сервер придется выкладывать два комплекта файлов.
- "Брутто" устроено все так:
- В html файл страницы надо вставить несколько строк по показанному ниже образцу.
- Положить рядом (а лучше в спец.папочку на своем сайте, чтобы цеплять оттуда ко всем страницам, каким надо) два файла: стилевой iview.css (в нем написано, что к чему) и сам скрипт плагина iview.js. Еще нужна библиотека jquery, но ее можно к себе не тащить, а брать из сети - в данном файле так и сделано. Ниже все описано. Сохраните сейчас этот файл из своего браузера "как... Веб-страница полностью" - все и сохранится. Ну или вот архив.
Успехов в трудах!
ГШ, 2.12.2021
Плагин просмотра картинок
Подключение к странице
- подключем стили iview.css
- подключаем библиотеку jquery
- подключаем плагин iview.js
- добавляем к картинкам атрибут "data-iview"
- Готово, можно проверять
- Стили лучше подключать в <head>
- Скрипты лучше подключать в конце <body>
- Порядок скриптов важен: сначала jquery, потом плагин
- Стили плагина можно перенести в общий css файл сайта
- Библиотеку jquery лучше взять посвежее:
страница загрузки,
ссылка "Download the compressed, production jQuery"
- Для подключения библиотеки можно использовать CDN сервера, например так:
Здесь скачивать файл библиотеки себе на сайт не нужно, он загрузится из интернет.
Работает только на странице сайта в интернете,
с локальным html файлом на диске это не работает.
- Если не работает, нужно просмотреть ошибки в консоли браузера.
Нажать клавиши
F12 или Ctrl+Shift+J
или Ctrl+Shift+K (зависит от браузера),
и выбрать вкладку Console (Консоль) - на ней будут показаны ошибки красным цветом.
Просмотр отдельных картинок
Настроить просмотр для отдельной картинки.
Открывается тот же файл картинки, но в увеличенном виде.
Атрибут "alt" позволяет показать подпись к картинке в просмотре.
Можно открыть в просмотре другой файл, например большого разрешения.
Здесь для наглядности другой файл содержит совсем другую картинку.
Если другой файл загрузить не удалось (например, ссылка указана неверно),
то будет показан исходный файл, а в консоли браузера появится ошибка.
Можно указать альтернативное изображение для просмотра другим способом.
Картину необходимо поместит в ссылку, в ссылке указать url картинки для просмотра
и добавить к ссылке атрибут data-iview.
Здесь также для наглядности другой файл содержит совсем другую картинку.
Контейнеры просмотра
Какой-то текст
Можно настроить просмотр для всех картинок в определенной части страницы.
Вместо того, чтобы указывать атрибут data-iview для каждой картинки,
можно все картинки с текстом и другим html поместить
в один элемент - контейнер (например data-iview.
Внутри контейнера продолжают действовать индивидуальные настройки
для отдельных картинок.
Для запрета просмотра отдельных картинок в контейнере
картинкам нужно добавить атрибут data-iview="disable"
Правило замены
В контейнере можно настроить правило получения имен файлов для просмотра,
которое будет применяться к каждой картинке внутри контейнера.
Правило заменяет часть строки в имени исходного файла другой строкой,
и полученный новый файл показывается в просмотре.
Правило задается следующим образом образом:
replace пробел
что найти пробел
чем заменить
В примере выше у всех картинок в контейнере часть строки "1" заменяется "2".
Для первой картинки ("img1.jpg") после замены получим "img2.jpg" - этот файл и будет показываться в просмотре.
В имени второй картинки отсутствует строка "1", имя файла для просмотра будет тем же.
Другие примеры использования правила замены:
Маленькие картинки на странице из берутся из папки "small",
в просмотре будем показывать соответствующие файлы из папки "big":
Примеры работы этого правила (исходная картинка → просмотр):
/small/123.jpg → /big/123.jpg
/small/456.jpg → /big/456.jpg
Маленькие и большие картинки в доной папке, у больших картинок
в конце имени файла добавлено "_big":
Примеры работы этого правила:
photos/123.jpg → photos/123_big.jpg
photos/456.jpg → photos/456_big.jpg
Несколько контейнеров на странице
На странице может быть несколько контейнеров, с разными правилами:
Контейнеры можно вкладывать друг в друга:
Подключение с javascript
Вместо атрибута data-iview просмотр можно подключать с помощью javascript.
Скрипт нужно разместить после подключения библиотеки jquery.
В примере просмотр подключен ко всем картинкам (тег "img") с css классом "photo",
для этого в коде указан css селектор img.photo.
Можно указать любой другой селектор картинок, например:
img - все картинки на странице
a > img - все картинки внутри ссылок
.report img - все картинки внутри элементов с классом "report"
Таким же способом можно превратить любой элемент страницы в контейнер просмотра,
указав селектор контейнера, нaпример:
din.report - всем картинкам внутри элементов
Подробнее о селекторах можно узнать в любом руководстве по CSS.
В метод iview можно передать параметры, в которых указать,
как получать имя файла для просмотра из исходного имени файла:
Функция в параметрах получает имя исходного файла картинки на странице,
и должна вернуть новое имя файла, которое будет показано в просмотре.
Например, для правила заменыdata-iview="replace small big"
можно сделать идентичную функцию:
Стили просмотра
Стили в файле iview.css подробно прокомментированы.
Чтобы убрать "крестик" для закрытия просмотра, нужно добавит css:
или убрать из файла iview.js строку 68:
F12 или Ctrl+Shift+J
или Ctrl+Shift+K (зависит от браузера),
и выбрать вкладку Console (Консоль) - на ней будут показаны ошибки красным цветом.
Настроить просмотр для отдельной картинки.
Открывается тот же файл картинки, но в увеличенном виде.
Атрибут "alt" позволяет показать подпись к картинке в просмотре.
Можно открыть в просмотре другой файл, например большого разрешения.
Здесь для наглядности другой файл содержит совсем другую картинку.
Если другой файл загрузить не удалось (например, ссылка указана неверно),
то будет показан исходный файл, а в консоли браузера появится ошибка.
Можно указать альтернативное изображение для просмотра другим способом.
Картину необходимо поместит в ссылку, в ссылке указать url картинки для просмотра
и добавить к ссылке атрибут data-iview.
Здесь также для наглядности другой файл содержит совсем другую картинку.
Какой-то текст
Можно настроить просмотр для всех картинок в определенной части страницы.
Вместо того, чтобы указывать атрибут data-iview для каждой картинки,
можно все картинки с текстом и другим html поместить
в один элемент - контейнер (например )
и установить ему атрибут data-iview.
Внутри контейнера продолжают действовать индивидуальные настройки для отдельных картинок.
Для запрета просмотра отдельных картинок в контейнере
картинкам нужно добавить атрибут data-iview="disable"
В контейнере можно настроить правило получения имен файлов для просмотра,
которое будет применяться к каждой картинке внутри контейнера.
Правило заменяет часть строки в имени исходного файла другой строкой,
и полученный новый файл показывается в просмотре.
Правило задается следующим образом образом:
replace пробел
что найти пробел
чем заменить
В примере выше у всех картинок в контейнере часть строки "1" заменяется "2".
Для первой картинки ("img1.jpg") после замены получим "img2.jpg" - этот файл и будет показываться в просмотре.
В имени второй картинки отсутствует строка "1", имя файла для просмотра будет тем же.
Другие примеры использования правила замены:
Маленькие картинки на странице из берутся из папки "small",
в просмотре будем показывать соответствующие файлы из папки "big":
Примеры работы этого правила (исходная картинка → просмотр):
/small/123.jpg → /big/123.jpg
/small/456.jpg → /big/456.jpg
Маленькие и большие картинки в доной папке, у больших картинок
в конце имени файла добавлено "_big":
Примеры работы этого правила:
photos/123.jpg → photos/123_big.jpg
photos/456.jpg → photos/456_big.jpg
Контейнеры можно вкладывать друг в друга:
Вместо атрибута data-iview просмотр можно подключать с помощью javascript. Скрипт нужно разместить после подключения библиотеки jquery.
В примере просмотр подключен ко всем картинкам (тег "img") с css классом "photo",
для этого в коде указан css селектор img.photo.
Можно указать любой другой селектор картинок, например:
img - все картинки на странице
a > img - все картинки внутри ссылок
.report img - все картинки внутри элементов с классом "report"
Таким же способом можно превратить любой элемент страницы в контейнер просмотра,
указав селектор контейнера, нaпример:
din.report - всем картинкам внутри элементов
добавлен просмотр.
Подробнее о селекторах можно узнать в любом руководстве по CSS.
В метод iview можно передать параметры, в которых указать,
как получать имя файла для просмотра из исходного имени файла:
Функция в параметрах получает имя исходного файла картинки на странице, и должна вернуть новое имя файла, которое будет показано в просмотре.
Например, для правила заменыdata-iview="replace small big"
можно сделать идентичную функцию:
Стили в файле iview.css подробно прокомментированы.
Чтобы убрать "крестик" для закрытия просмотра, нужно добавит css:
или убрать из файла iview.js строку 68: