Jump to content
  • Sign Up
  • 0

marianna9201
 Share

Question

Добрый день!

Помогите, пожалуйста, разобраться с маленькой проблемой.

На сайте есть модальное окно , которое увеличивает изображения: http://bloky.ru/catalog/333

В данном варианте это маленькие картинки ДСП, ПВХ и т.д.

При нажатии на картинку происходит её увеличение, но при этом миниатюра картинки исчезает со страницы сайта, т.е. остается открытой только одна увеличенная картинка. Как же сделать, чтобы отображались одновременно 2 картинки: и миниатюра, и оригинальное изображение?

Спасибо!

 

Вот CSS - код модального окна:

zoom-images {  cursor: zoom-in;}.zoom-images:focus {  position: fixed;  z-index: 10;  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  width: auto;  height: auto;  max-width: 99%;  max-height: 99%;  pointer-events: none;    box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);}.zoom-images:focus {  pointer-events: none;}
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Чтобы сохранить оригинал вам надо скопировать ноду картинки и её уже показывать. Сейчас вы берёте текущую картинку и назначаете ей position: fixed; не удивительно, что она выпадает из потока. Не понятно как вы хотите добиться требуемого поведения без скриптов.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • Алеся
      By Алеся
      Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/
      Обратите, пожалуйста, внимание на:
      - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить?
      - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было.
      - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения.
      Заранее спасибо!
    • Алеся
      By Алеся
      Ребята, без вас никуда!
      Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
      Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?
       
      На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints
       
      Вот типа того что-то пробую...
      https://jsfiddle.net/aqmuyhwd/
       
              
       
    • Алеся
      By Алеся
      Всем привет! Помогите, пожалуйста, найти ошибку в js. Почему-то не срабатывает display: none когда задумано скрыть первую картинку.
      btn_next.onclick = function () {
         images[i].style.display = 'none';
      }
      Весь код  здесь https://jsfiddle.net/Lx3qagdp/1/
       
      Заранее спасибо!
    • TRVelund
      By TRVelund
      Хотели в крестиках ноликах заменить кресты и нули на анимешных тяночек.
      В голову лезет что то по типу x = url(ссылка), но нормально сформулировать ничего не можем, первый курс колледжа.
      Заранее спасибо за помощь.
    • Sergei.Nert
      By Sergei.Nert
      Моих знаний недостаточно для решение этой проблемы, надеюсь на вашу помощью. 
      Как можно было нагуглить, какие еще недочеты в моём коде ?
      index.html style.css
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy