Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Пропорции для размеров фотографии. (https://javascript.ru/forum/events/61891-proporcii-dlya-razmerov-fotografii.html)

Wilshere 14.03.2016 09:19

Пропорции для размеров фотографии.
 
На странице имеются маленькие фотографии, при клике на них, они открываются в диве в увеличенном размере, сохраняя пропорции в увеличенном виде. Все работает через element, но когда помещаю фото в массив не знаю, как обратиться к свойству img.

Вот код без массива, где все работает:
function aysNkaryBacirBacvoghPatuhanum(element){
		document.getElementById("frizDivId").style.display = "block";
				document.getElementById("bacvoghPatuhanId").style.display = "block";
				var mecElement = document.getElementById("mecNkarId");
				mecElement.src = element.src;
				
				
				var x=window.innerHeight*0.9;

				var y=window.innerWidth*0.8;

				var a=element.height;

				var b=element.width;

				var c=x/a;	arnelov 
							
				if(b*c > y){

					c = y/b;
							

				}
				mecElement.width = b*c;
				mecElement.height = a*c;
				mecElement.style.marginLeft = "-" + b*c/2 + "px";
				mecElement.style.marginTop = "-" + a*c/2 + "px";
				}
			
			
		</script>
	</head>
	<body>
		<img src="img/1.jpg" style="width: 100px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this)">
		<img src="img/2.jpg"  style="width: 500px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this)">
		<img src="img/3.jpg"  style="width: 20px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this)">
		<img src="img/4.jpg" style="width: 10px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this)">
		
		
		<div style="display:none;" id="bacvoghPatuhanId" class="bacvogh-patuhan">
			
			<div>
				<img class="mec-nkar" id="mecNkarId" src="">
			</div>
			
		</div>



Тоже самое нужно реализовать в коде с массивом.
var myFoto = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];

рони 14.03.2016 09:23

Wilshere,
aysNkaryBacirBacvoghPatuhanum(this, 0)
function aysNkaryBacirBacvoghPatuhanum(element,num){
mecElement.src = myFoto[num]

Wilshere 14.03.2016 09:36

рони, правильно ли понял код?

var myFoto = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
var nachalyiyIndex  = 0;
for (var i=0; i<img.length; i++);

function aysNkaryBacirBacvoghPatuhanum(element, num){
		document.getElementById("frizDivId").style.display = "block";
				document.getElementById("bacvoghPatuhanId").style.display = "block";
				var mecElement = document.getElementById("mecNkarId");
				mecElement.src = myFoto[num]
				}
				
				var x=window.innerHeight*0.9;

				var y=window.innerWidth*0.8;

				var a=element.height;

				var b=element.width;

				var c=x/a;	arnelov 
							
				if(b*c > y){

					c = y/b;
							

				}
				mecElement.width = b*c;
				mecElement.height = a*c;
				mecElement.style.marginLeft = "-" + b*c/2 + "px";
				mecElement.style.marginTop = "-" + a*c/2 + "px";
				}
			
			
		</script>
	</head>
	<body>
		<img src="img/1.jpg" style="width: 100px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this, 0)">
		<img src="img/2.jpg"  style="width: 500px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this, 0)">
		<img src="img/3.jpg"  style="width: 20px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this, 0)">
		<img src="img/4.jpg" style="width: 10px; height:100px;" onclick="aysNkaryBacirBacvoghPatuhanum(this, 0)">
		
		
		<div style="display:none;" id="bacvoghPatuhanId" class="bacvogh-patuhan">
			
			<div>
				<img class="mec-nkar" id="mecNkarId" src="">
			</div>
			
		</div>


Но так картинка опять растягивается.

рони 14.03.2016 10:38

Цитата:

Сообщение от Wilshere
(this, 0)">

this,1 this,2 this,3 и строка 3 зачем?
Цитата:

Сообщение от Wilshere
Но так картинка опять растягивается.

не понял

рони 14.03.2016 10:39

Цитата:

Сообщение от Wilshere
arnelov

???это что

Wilshere 14.03.2016 10:51

Цитата:

Сообщение от рони (Сообщение 410895)
???это что

От коммента осталось, забыл удалить.


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