Збільшення зображення при натисканні

Більше року тому я написав статтю про те, як можна реалізувати збільшення зображення при натисканні JQuery. З тих пір я багато дізнався і багато чому навчився і той спосіб став мені ніяк не оптимальним, не красивим, тому з'явилося бажання написати більш сучасний скрипт.

Отже, суть ідеї - скрипт повинен працювати з будь-якими зображеннями з класом minimized на сторінці, не повинно бути ніяких прихованих елементів (навіщо засмічувати код сторінки) і зображення повинно виводитися в центр екрану.

У минулому прикладі зображення виводилося в прихований

. який був відцентровано на сторінці за допомогою css. Зараз логіка буде та ж, але реалізація зовсім інша:

  1. зображення, які ми хочемо збільшити, повинні мати клас minimized;
  2. при кліці по зображенню, перед закривається тегом буде додаватися
    з класом magnify в який буде виводиться наша картинка і центрироваться на сторінці і
    з класом overlay. затемняють фон
  3. при кліці по кнопці закриття або затемнювати фону, збільшене зображення треба закрити, а додані елементи видалити

Почнемо. Спочатку виведемо зображення:

/ * Картинка на сторінці * /

border. 1px solid #FFF;

border. 1px solid yellow;

border. 1px solid #AFAFAF;

background. url (http. //codernote.ru/files/cross.png) no-repeat center center;

background-size. 16px 16px;

animation. rota 4s infinite normal;

$ ( '.minimized'). click (function (event)

var i_path = $ (this). attr ( 'src');

$ ( 'Body'). append ( '

Збільшення зображення при натисканні
');

left. ($ (Document). Width () - $ ( '#magnify'). OuterWidth ()) / 2.

top. ($ (Window). Height () - $ ( '#magnify'). OuterHeight ()) / 2

$ ( '#overlay, #magnify'). fadeIn ( 'fast');

спасибі за статтю. Якраз вирішив зробити у себе на сайті подібне. Тільки ви забули тут вказати, що замість $ (document) .height () треба використовувати $ (window) .height (), інакше картинка в пампаси з'їде. А для #magnify вказати position: fixed;