CodeLAB
на главную карта сайта обратная связь

Популярные задачи:

#Заливка замкнутой области. (59000 hits)
#Динамическая очистка выпадающего списка (select) на javascript. (85562 hits)
#Древовидные структуры. (53848 hits)
#Как работать с zip архивами стандартными средствами windows. (38879 hits)
#Подключение. (23392 hits)
#Преобразование целых чисел в битовый массив. (34189 hits)
#Сортировка Шелла, обший принцип. (139513 hits)
#Счетчик времени с точностью до микросекунд. (121686 hits)
#Сортировка выбором, общий подход. (68343 hits)
#Сохранение данных формы после перезагрузки через куки. (193110 hits)
#Последовательный поиск и его оптимизации. (42765 hits)
#Переключатель в кириллицу. (30077 hits)
#Таймер. (37868 hits)
#Сравнение алгоритмов быстрой сортировки. (69670 hits)
#Предварительная загрузка изображений. (44343 hits)
#Пирамидальная сортировка. (193496 hits)
#Выборка всех записей таблицы. (30086 hits)
#Простая геометрическая и текстовая анимация. (398029 hits)
#Двусторонняя карта. (30513 hits)
#Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом. (42940 hits)


Главная >> Каталог задач >> Веб-разработка >> Клиентский скриптинг(js, vba и т.д.) >> popup ("всплывающие") динамические окна >> Просмотр изображения во всплывающем окне

Просмотр изображения во всплывающем окне

Aвтор:
Дата:
Просмотров: 85132
реализации(javascript: 1шт...) +добавить

Для многих изображений, публикуемых на сайте, очень часто нужно обеспечить просмотр этой картинки в увеличенном(полном) размере. 2 основных пути для достижения этого - открытие дополнительного popup окна и динамическая вставка новой большой картинки вместо старой(с растяжением дизайна страницы либо без него - поверх)

Здесь рассматривается первый вариант, т.е. дополнительное popup-окно. Очень часто в этом случае создается, верстается дополнительная html-страница, содержащая минимальный код с этим тегом img отображающим большую картинку. Довольно трудоемкий и сложный для последующей поддержки способ: для любой картинки необходимо создавать новую страницу, и при любом изменении изображения менять приходится обычно в нескольких местах.

Поскольку существует возможность непосредственно из javascript-а задать содержимое (html-код) этого popup окна - то можно легко избавится от всех этих недостатков.

А именно - создаем специальную функцию, по-интерфейсу схожую с window.open (чтобы легче запоминалась), которой вместо url документа - будет задаваться адрес картинки. Далее эта функция сама будет создавать этот примитивный html-код, требуемый для отображения этой картинки.

+ Попутно было бы неплохо обеспечить этот popup и другими некоторыми удобствами как: автоматическое подстраивание под размер картинки, центрирование по центру экрана, закрытие по клику и т.д.

Реализации:

javascript(1)   +добавить

1) Просмотр изображения во всплывающем окне на javascript, code #192[автор:this]