Только CSS изображение с всплывающими эскизами - PullRequest
Новая
       26

Только CSS изображение с всплывающими эскизами

0 голосов
/ 23 мая 2018

Мне нужно решение только для CSS, которое позволяет увеличивать изображения при нажатии для увеличения на той же странице с всплывающим окном и исчезающим фоном.

У меня есть основной макет с основным изображением, а затем уменьшенные изображения под нимэтот.Когда пользователь нажимает на основное изображение или на любую из миниатюр, я хочу, чтобы во всплывающем окне отображалось изображение большего размера.

Затем, когда пользователь нажимает на изображения и появляется всплывающее окно, мне нужен крестикв углу, который затем закрывает всплывающее окно.

Это пример: https://www.ebay.co.uk/itm/352338537173?ViewItem=&item=352338537173

Хотя в приведенном выше примере также меняются эскизы на основное изображение, которое мне не нужно.Таким образом, более простая версия заключается в том, что при щелчке миниатюрных изображений они просто увеличиваются так же, как и основное изображение.

Основной макет кода, который я сделал до сих пор, выглядит следующим образом:

CSS 

#images {
width: 100%%;
margin: 0 auto;
max-width: 500px;
}
#main-image {
width: 100%;
}
#main-image img { 
display: block;
max-width: 100%;
height: auto;
}
#thumbnail-images {
width: 100%;
margin: 0;
overflow: auto;
padding: 15px 0;
}
#thumbnail-images ul {
float: left;
margin-bottom: 0;
white-space: nowrap;
list-style: none;
padding: 0;
}
#thumbnail-images li {
width: 20%;
margin: 7px;
text-align: center;
float: left;
display: block;
}
#thumbnail-images li img {
width: 100%;
position: relative;
cursor: pointer;
margin-bottom: 15px;
}

HTML 

<div id="images">
<div id="main-image"><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></div>
<div id="thumbnail-images">
<ul>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
</ul>
</div>
</div>

Любая помощь или совет будет высоко ценится.

Спасибо

1 Ответ

0 голосов
/ 23 мая 2018

Посмотри на это.Надеюсь, это поможет вам. 

 #gallery {
    width: 600px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin: 100px auto;
    border: 2px solid #003C72;
  }
  #navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
  }
  #navigation li {
    padding: 0;
    margin: 0;
    float: left;
    clear: both;
  }
  #navigation li a img {
    display: block;
    border: none;
  }
  #navigation li a {
    display: block;
  }
  #full-picture {
    width: 500px;
    height: 375px;
    overflow: hidden;
    float: left;
  }
<div id="gallery">
 <ul id="navigation">
 <li><a href="#pic1"><img alt="" src="https://basicuse.net//content/download/1422/6814/file/nature1.jpg" /></a></li>
 <li><a href="#pic2"><img alt="" src="https://basicuse.net//content/download/1423/6816/file/nature2.jpg" /></a></li>
 <li><a href="#pic3"><img alt="" src="https://basicuse.net//content/download/1424/6818/file/nature3.jpg" /></a></li>
 <li><a href="#pic4"><img alt="" src="https://basicuse.net//content/download/1425/6820/file/nature4.jpg" /></a></li>
 <li><a href="#pic5"><img alt="" src="https://basicuse.net//content/download/1426/6822/file/nature5.jpg" /></a></li>
 </ul>
 <div id="full-picture">
 <div><a name="pic1"></a><img alt="" src="https://basicuse.net//content/download/1413/6796/file/nature1.jpg" /></div>
 <div><a name="pic2"></a><img alt="" src="https://basicuse.net//content/download/1414/6798/file/nature2.jpg" /></div>
 <div><a name="pic3"></a><img alt="" src="https://basicuse.net//content/download/1416/6802/file/nature3.jpg" /></div>
 <div><a name="pic4"></a><img alt="" src="https://basicuse.net//content/download/1417/6804/file/nature4.jpg" /></div>
 <div><a name="pic5"></a><img alt="" src="https://basicuse.net//content/download/1418/6806/file/nature5.jpg" /></div>
 </div>
</div>
...