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

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

#Предварительная загрузка изображений. (43262 hits)
#Преобразование RGB в HEX и обратно HEX в RGB. (52280 hits)
#Полезные утилиты, небольшие api и библиотеки и проч.. (63332 hits)
#Глубокое полное клонирование. (31069 hits)
#Выборка всех записей таблицы. (28835 hits)
#Поверхностное клонирование. (23742 hits)
#Сортировка вставкой. (103905 hits)
#Вставка новой записи в таблицу БД. (31740 hits)
#Часики на js. (85333 hits)
#Шейкер-сортировка. (64895 hits)
#Замена символа строки. (436833 hits)
#Сравнение алгоритмов быстрой сортировки. (67746 hits)
#Рисование тора. (30483 hits)
#Загрузчик классов. (38401 hits)
#Постраничный вывод. (65563 hits)
#Использование компилируемых (prepared) запросов. (26350 hits)
#Случайный выбор элемента при неизвестном их количестве. (32206 hits)
#Плоттеры для рисования графиков. (25850 hits)
#Рисование окружности (по Брезенхэму). (28786 hits)
#Циклический сдвиг одномерного массива или строки, 3 уникальных алгоритма. (365938 hits)


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



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

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

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

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

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

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

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

Реализации: javascript(1)   +добавить реализацию

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