Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Помощь с доработкой (https://javascript.ru/forum/xhtml-html-css/70285-pomoshh-s-dorabotkojj.html)

okayguys 24.08.2017 12:15
Помощь с доработкой
 
Всех приветствую.
Помогите, пожалуйста, есть скрипт, который работает только до 8 картинок, свыше 8 картинок начинает накладывать их друг на друга.
Как исправить? Большое спасибо за помощь.

Nexus 24.08.2017 12:46
okayguys, а скрипт где?)

рони 24.08.2017 13:08
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
Цитата:
Сообщение от Nexus
а скрипт где?)
раздел (X)HTML/CSS

рони 24.08.2017 13:27
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>

Nexus 24.08.2017 15:45
Может так: 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>

okayguys 24.08.2017 17:00
Всем спасибо. Меня вполне устроил вариант Nexus'a, только теперь возник еще 1 вопрос, как можно сделать, чтобы увеличенное изображение не центрировалось на сайте (при большом количестве изображений приходится прокручивать вверх, чтобы увидеть "зум"), а оставалось в видимости, т.е. по другому говоря - оставалось на уровне глаз?
Предварительное спасибо за помощь . Премного благодарен.

рони 24.08.2017 20:28
okayguys,
css3-lightbox/

okayguys 24.08.2017 21:37
рони,
спасибо за наводку . Будем пробовать!


Часовой пояс GMT +3, время: 14:49.