Jump to content
  • 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 TRVelund
      Хотели в крестиках ноликах заменить кресты и нули на анимешных тяночек.
      В голову лезет что то по типу x = url(ссылка), но нормально сформулировать ничего не можем, первый курс колледжа.
      Заранее спасибо за помощь.
    • By Sergei.Nert
      Моих знаний недостаточно для решение этой проблемы, надеюсь на вашу помощью. 
      Как можно было нагуглить, какие еще недочеты в моём коде ?
      index.html style.css
    • By Evilejik
      Доброго всем дня! Подскажите, пожалуйста, начинающему верстальщику. Как сделать подобное в строку и что бы крайние изображение растягивались на всю ширину экрана, в зависимости от того, какое разрешение у пользователя. К слову, может есть способы не картинками, а блоками сделать подобное? Скриншот прилагаю. 

    • By Alexand
      Здравствуйте дорогие специалисты програмирования.
      Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят!
      Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту.
      Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application 
      Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit
      С уважением к Вам, за ранее спасибо.
    • By Pekod
      Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать?
       
      main.html
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="wrapper"> <header>Номер и почта</header> <main> <nav> <ul class="topmenu"> <li><a href="" class="active">Главная</a> </li> <li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">Блог<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Блог</a></li> <li><a href="">О нас</a></li> </ul> </nav> <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> <img src="image/australia.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="image/parks.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> <img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </main> <content class="tab"> <div class="container-prim"> <div class="element-1">Пункт 1</div> <div class="element-2">Пункт 2</div> <div class="element-3">Пункт 3</div> <div class="element-4">Пункт 4</div> </div> <!-- <ul class="zebra"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 3</li> </ul> --> </content> <content class="zero"> <div class="row slider"> <div class="col-md-2"> <div class="details"> <h2>Заголовок 1</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 2</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 3</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 4</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 5</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 6</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 7</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> </div> </content> <footer>Адреса и контактсы</footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="main.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <script> $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> main.css
      .wrapper { height: 100%; display: flex; flex-direction: column; } header { height: 30px; width:1200px; margin: 0 auto; padding: 1px; } footer { height: 300px; width:1200px; margin: 0 auto; padding:10px; } main { } body { margin: 0; } header { background-color: #daf0b3f6; } main { background-color:#ecf0f1; height: 600px; width: 1200px; margin: 0 auto; } content.tab { background-color:#66c3ee; height: 300px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } content.zero { background-color:#b7e9b5; height: 350px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } footer { background-color:#000000; color:white; box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596); } @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic); *{box-sizing: border-box;} body { margin: 0; font-family: 'Open Sans', sans-serif; } nav {background: #2fa4e7 ;} nav ul { margin: 0; padding: 0; list-style: none; } nav ul:after { content: ""; display: table; clear: both; } nav a { text-decoration: none; display: block; transition: .3s linear; } .topmenu > li { float: left; position: relative; border-left: 1px solid black; } .topmenu > li:first-child {border-left: 0;} .topmenu > li > a { padding: 7px 30px; font-size: 14px; text-transform: uppercase; color: #FEFDFD; letter-spacing: 2px; } .topmenu > li > a.active { color: rgb(0, 0, 0); } .submenu a:hover {color: #0037cf;} .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .container-prim { font-size: 0; padding: 10px 50px 15px; text-align: center; } .element-1, .element-2, .element-3, .element-4 { display: inline-block; width: 250px; height: 265px; font-size: 20px; font-weight: 500; text-align: center; padding-top: 10px; vertical-align: bottom; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); border-radius: 8px; } .element-1 { background-color: #fbfdfd; } .element-2 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-3 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-4 { color: #000000; background-color: #fbfdfd; margin-left: 20px; } .element-relative { position: relative; top: -20px; left: -20px; } /* .zebra { font: 14px Verdana, Geneva, sans-serif; text-align: center; } .zebra li { display : inline-block; width : 250px; height: 280px; margin-bottom: 10px; background: #ffffff; vertical-align: top; text-align: center; line-height: normal; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); /* эмуляция inline-block для IE6-7*/ /* //display : inline; //zoom : 1; } */ .carousel-caption { transform: translateY(-50%); bottom: initial; top: 50%; } .details { margin: 20px 20px; background-color: #fff; padding: 30px 20px; position: relative; z-index: 1; height: 260px; } .details h2 { font-size: 22px; text-transform: uppercase; transition: 0.6s all; } .details p { font-size: 14px; transition: 0.6s all; } .details a { text-decoration: none; text-transform: capitalize; color: #fff; background-color: #2c3e50; padding: 6px 12px; display: inline-block; font-size: 14px; border: 1px solid #2c3e50; transition: 0.6s all; } .details::before { content: ""; width: 5px; height: 100%; background-color: #ff5722; position: absolute; left: 0; top: 0; z-index: -1; transition: 0.6s all; } .details:hover::before { width: 100%; } .details:hover h2,.details:hover p { color: #fff; } .details:hover a { background-color: transparent; border: 1px solid #fff; }  
×
×
  • 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