Recommended Posts

Добрый день!

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

На сайте есть модальное окно , которое увеличивает изображения: 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;}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By negedja
      Добрый день! 
      Совсем зелёный в вопросах вёрстки и прошу помощи по следующей проблеме.
      На мобильных устройствах или в Internet Explorer пропадают "картинки" (Изображение 1), при этом на компьютере (браузер Opera) всё отображается корректно (Изображение 2).
      В качестве хостинга выбран GitHub и его бесплатный сервис GitHub Pages.
      Пример того, как именно изображения интегрировались на сайт: 
      <img src = "images/vk.png" width = "5%" alt = "vk">


    • By Danil Polyanskiy
      Я начинающий верстальщик, обучаюсь всему HTML, CSS и JQuery около 3-х месяцев. Хотелось бы узнать оценку других разработчиков на мою верстку.
       
      Сайт: https://danilpolyanskiy.github.io/index.html
    • By Laeda87
      Ребята, выручайте. Есть задача сделать плитку с датой, как во вложении. Сделал рамку скруглённую в виде фонового изображения блока div. Внутри div сделал 3 тега "р" , так как у каждого текста свои стили должны быть и отступы разные. Но текст разъезжается и вылезает за выделенные для него границы. Подскажите, как быть.
      HTML
      <div class="latest">
      <p class="number">15</p>
      <p class="june">June</p>
      <p class="year">2016</p>

      </div>

      CSS
      .latest {
      background-image: url(image/square.png);
      width: 98px;
      height: 139px;
      margin-left: 445px
      }

      .number {
      padding-top: 32px;
      color: #000000;
      font-family: Poppins;
      font-size: 32px;
      font-weight: 500;
      height: 24px;

      }

      .june {
      color: #9e9e9e;
      font-family: Poppins;
      font-size: 14px;
      font-weight: 500;
      line-height: 48px;
      padding-top: 12px;

      }

      .year {
      color: #9e9e9e;
      font-family: "Poppins - Medium Italic";
      font-size: 13px;
      font-weight: 400;
      line-height: 48px;
      height: 11px;
      padding-top: 10px;
      }


  • Member Statistics

    46,763
    Total Members
    3,128
    Most Online
    newe
    Newest Member
    newe
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.