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

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

#Разбор строки. (271476 hits)
#Полезные утилиты, небольшие api и библиотеки и проч.. (67857 hits)
#Постраничный вывод. (69719 hits)
#Плоттеры для рисования графиков. (28287 hits)
#Как работать с zip архивами стандартными средствами windows. (40531 hits)
#Утилиты. (111880 hits)
#Поверхностное клонирование. (26199 hits)
#Подключение. (25488 hits)
#qForms, библиотека типичного функционала валидации/построения/связки html-форм. (141329 hits)
#Числа Армстронга. (44495 hits)
#Постепенное затемнение. (49520 hits)
#Обработка шаблонных писем. (44135 hits)
#Простой генератор случайных чисел. (131826 hits)
#Создание нестандартного (custom-ного) окна браузера. (34395 hits)
#Программное создание ссылок. (98188 hits)
#Поиск дубликатов внутри файла. (29800 hits)
#Относительный путь к файлу. (38064 hits)
#"C# и платформа .NET" Эндрю Троелсен (Andrew Troelsen, "C# and the .NET platform"), листинги, код, примеры из книги, исходники. (37158 hits)
#Вычисление среднего, среднего отклонения, среднеквадратического отклонения и дисперсии заданной выборки. (44858 hits)
#Пирамидальная сортировка. (196703 hits)


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

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

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

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

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

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

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

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

Реализации:

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

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