Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2016, 09:19
Аватар для Wilshere
Интересующийся
Отправить личное сообщение для Wilshere Посмотреть профиль Найти все сообщения от Wilshere
 
Регистрация: 07.03.2016
Сообщений: 11

Пропорции для размеров фотографии.
На странице имеются маленькие фотографии, при клике на них, они открываются в диве в увеличенном размере, сохраняя пропорции в увеличенном виде. Все работает через 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"];
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2016, 09:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Wilshere,
aysNkaryBacirBacvoghPatuhanum(this, 0)
function aysNkaryBacirBacvoghPatuhanum(element,num){
mecElement.src = myFoto[num]
Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2016, 09:36
Аватар для Wilshere
Интересующийся
Отправить личное сообщение для Wilshere Посмотреть профиль Найти все сообщения от Wilshere
 
Регистрация: 07.03.2016
Сообщений: 11

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

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>


Но так картинка опять растягивается.
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2016, 10:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Wilshere
(this, 0)">
this,1 this,2 this,3 и строка 3 зачем?
Сообщение от Wilshere
Но так картинка опять растягивается.
не понял
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2016, 10:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Wilshere
arnelov
???это что
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2016, 10:51
Аватар для Wilshere
Интересующийся
Отправить личное сообщение для Wilshere Посмотреть профиль Найти все сообщения от Wilshere
 
Регистрация: 07.03.2016
Сообщений: 11

Сообщение от рони Посмотреть сообщение
???это что
От коммента осталось, забыл удалить.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
виджет, только сторона клиента (JS, JQUery, работа с датами, масштабирование) eugen35 Работа 4 31.07.2014 09:50
Яндекс.Деньги организуют в Петербурге школу для веб-разработчиков LinaKurkova Работа 0 15.05.2014 22:41
Нужен javascript для обрезки фотографии онлайн temniy665 Работа 1 31.08.2012 13:37