Как создать изображение, которое становится больше при нажатии на него - PullRequest
Новая
       16

Как создать изображение, которое становится больше при нажатии на него

0 голосов
/ 01 июля 2018

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

<div class="container">
	<div class="row">
		<img class="col-xs-3 paddingtop1" src="img.jpg">
 		<img class="col-xs-3 paddingtop1" src="img3.jpeg">
  		<img class="col-xs-3 paddingtop1" src="img4.jpg">
		<img class="col-xs-3 paddingtop1" src="img5.jpg">
		<img class="col-xs-3 paddingtop" src="img7.jpg">
		<img class="col-xs-3 paddingtop" src="img8.jpg">
		<img class="col-xs-3 paddingtop" src="img9.jpg">
   		<img class="col-xs-3 paddingtop" src="img10.jpg">
   		<img class="col-xs-3 paddingtop" src="img11.jpg">
   		<img class="col-xs-3 paddingtop" src="img2.jpg">
   		<img class="col-xs-3 paddingtop" src="img6.jpg">
   		<img class="col-xs-3 paddingtop" src="smilecup.jpg">
	</div>
</div>

1 Ответ

0 голосов
/ 01 июля 2018

Добавьте идентификаторы к каждому div и отредактируйте их в JS: 

function increase(id) {
    element = document.getElementById(id);
    width = element.clientWidth;
    element.style.width = String(width+10)+"px"
}
<div class="container">
	<div class="row">
		<img id = "1" onclick="increase('1')" class="col-xs-3 paddingtop1" src="img.jpg">
 		<img id = "2" onclick="increase('2')"class="col-xs-3 paddingtop1" src="img3.jpeg">
  		<img id = "3" onclick="increase('3')" class="col-xs-3 paddingtop1" src="img4.jpg">
		<img id = "4" onclick="increase('4')" class="col-xs-3 paddingtop1" src="img5.jpg">
		<img id = "5" onclick="increase('5')" class="col-xs-3 paddingtop" src="img7.jpg">
		<img id = "6" onclick="increase('6')" class="col-xs-3 paddingtop" src="img8.jpg">
		<img id = "7" onclick="increase('7')" class="col-xs-3 paddingtop" src="img9.jpg">
   		<img id = "8" onclick="increase('8')" class="col-xs-3 paddingtop" src="img10.jpg">
   		<img id = "9" onclick="increase('9')" class="col-xs-3 paddingtop" src="img11.jpg">
   		<img id = "10" onclick="increase('10')" class="col-xs-3 paddingtop" src="img2.jpg">
   		<img id = "11" onclick="increase('11')" class="col-xs-3 paddingtop" src="img6.jpg">
   		<img id = "12" onclick="increase('12')" class="col-xs-3 paddingtop" src="smilecup.jpg">
	</div>
</div>

И для полного экрана: 

function increase(id) {
    element = document.getElementById(id);
    element.style.width = window.innerWidth+"px"
}
<div class="container">
	<div class="row">
		<img id = "1" onclick="increase('1')" class="col-xs-3 paddingtop1" src="img.jpg">
 		<img id = "2" onclick="increase('2')"class="col-xs-3 paddingtop1" src="img3.jpeg">
  		<img id = "3" onclick="increase('3')" class="col-xs-3 paddingtop1" src="img4.jpg">
		<img id = "4" onclick="increase('4')" class="col-xs-3 paddingtop1" src="img5.jpg">
		<img id = "5" onclick="increase('5')" class="col-xs-3 paddingtop" src="img7.jpg">
		<img id = "6" onclick="increase('6')" class="col-xs-3 paddingtop" src="img8.jpg">
		<img id = "7" onclick="increase('7')" class="col-xs-3 paddingtop" src="img9.jpg">
   		<img id = "8" onclick="increase('8')" class="col-xs-3 paddingtop" src="img10.jpg">
   		<img id = "9" onclick="increase('9')" class="col-xs-3 paddingtop" src="img11.jpg">
   		<img id = "10" onclick="increase('10')" class="col-xs-3 paddingtop" src="img2.jpg">
   		<img id = "11" onclick="increase('11')" class="col-xs-3 paddingtop" src="img6.jpg">
   		<img id = "12" onclick="increase('12')" class="col-xs-3 paddingtop" src="smilecup.jpg">
	</div>
</div>
...