|
|
24.08.2017, 12:15
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2017
Сообщений: 7
|
|
|
Помощь с доработкой
Всех приветствую.
Помогите, пожалуйста, есть скрипт, который работает только до 8 картинок, свыше 8 картинок начинает накладывать их друг на друга.
Как исправить? Большое спасибо за помощь. |
|
24.08.2017, 12:46
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,794
|
|
|
okayguys, а скрипт где?)
|
|
24.08.2017, 13:08
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
okayguys,
как вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#gallery1 {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
-moz-user-select: none;
user-select: none;
}
#gallery1 img {
width: auto;
height: 150px;
margin-bottom: 12px;
margin-right: 12px;
cursor: zoom-in;
transition: all .8s ease-in-out;
}
#gallery1 img:focus {
position: fixed;
margin: auto;
transform: scale(3);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 31;
outline: none;
pointer-events: none;
}
</style>
</head>
<body>
<div id="gallery1">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-1.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-2.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-3.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-5.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-6.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-7.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-8.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-4.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-9.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-10.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-11.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-12.jpg" alt="" tabindex="0" />
</div>
</body>
</html>
|
|
24.08.2017, 13:09
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от Nexus
|
|
а скрипт где?)
|
раздел (X)HTML/ CSS |
|
24.08.2017, 13:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
okayguys,
без анимации, но на всю высоту видимой части.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#gallery1 {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
-moz-user-select: none;
user-select: none;
}
#gallery1 img {
width: auto;
height: 250px;
margin-bottom: 12px;
margin-right: 12px;
cursor: zoom-in;
}
#gallery1 img:focus {
position: fixed;
margin: auto;
width: auto;
height: 98%;
max-width: 98%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 31;
outline: none;
pointer-events: none;
}
#gallery1 img:focus ~ div {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
background: rgba(240,240,240,.9);
cursor: zoom-out;
}
</style>
</head>
<body>
<div id="gallery1">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-1.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-2.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-3.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-5.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-6.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-7.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-8.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-4.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-9.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-10.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-11.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-12.jpg" alt="" tabindex="0" />
</div>
</body>
</html>
|
|
24.08.2017, 15:45
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,794
|
|
Может так: https://jsfiddle.net/t5r4tqu1/1/
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#gallery1{
position: relative;
}
#gallery1 .item{
display:inline-block;
width:24%;
padding:0;
margin:0 0 10px;
text-align:center;
}
#gallery1 .item img{
max-width:100%;
max-height:150px;
}
#gallery1 img:focus {
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
z-index: 31;
max-width: 100%;
max-height: 100%;
outline: none;
pointer-events: none;
}
#gallery1 img:focus ~ div {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
background: rgba(240,240,240,.9);
cursor: zoom-out;
}
</style>
</head>
<body>
<div id="gallery1">
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-1.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-2.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-3.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-5.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-6.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-7.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-8.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-4.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-9.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-10.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-11.jpg" alt="" tabindex="0" />
</div>
<div class="item">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-12.jpg" alt="" tabindex="0" />
</div>
</div>
</body>
</html>
Последний раз редактировалось Nexus, 24.08.2017 в 15:49.
|
|
24.08.2017, 17:00
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2017
Сообщений: 7
|
|
|
Всем спасибо. Меня вполне устроил вариант Nexus'a, только теперь возник еще 1 вопрос, как можно сделать, чтобы увеличенное изображение не центрировалось на сайте (при большом количестве изображений приходится прокручивать вверх, чтобы увидеть "зум"), а оставалось в видимости, т.е. по другому говоря - оставалось на уровне глаз?
Предварительное спасибо за помощь . Премного благодарен.
|
|
24.08.2017, 20:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
|
|
24.08.2017, 21:37
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2017
Сообщений: 7
|
|
|
рони,
спасибо за наводку . Будем пробовать!
|
|
|
|
