Показать сообщение отдельно
  #1 (permalink)  
Старый 19.10.2009, 13:02
Новичок на форуме
Отправить личное сообщение для Денис Белкин Посмотреть профиль Найти все сообщения от Денис Белкин
 
Регистрация: 19.10.2009
Сообщений: 7

скрипт галереи
помогите: при клике на изображение оно не загружается с первого раза. а в ie8 вообще не загружается(
<script language="JavaScript">

function viewPicture(imgUrl) {
	//debugger;
		
	var divLay = document.createElement("div");//создаем мегаслой со всем содержимым
	divLay.setAttribute("id", "gallery");
	document.body.appendChild(divLay);//добавили в body 
	
	
		var imgTitle = imgUrl.firstChild.title;
		var divImg = document.createElement("div");//создаем див для картинки
		divImg.setAttribute("id","imgcont");
		divImg.innerHTML = "<a href=''>закрыть</a><p>картинка, на ней "+imgTitle+"</p>";
		divLay.appendChild(divImg)// div#imgcont поместили в div#gallery
		
									
			var objImgL = document.createElement("img");//создали объект картинку 
			objImgL.setAttribute("src","img/lightbox-ico-loading.gif"); // адрес картинки загрузки
			objImgL.setAttribute("style","margin-top: 200px");
			divImg.appendChild(objImgL); // определили ее в див divImg 
					
			
				var objImg = document.createElement("img");//создали объект картинку 
				objImg.setAttribute("src",imgUrl); //установили ее адрес	
				objImg.setAttribute("style","visibility: hidden");		
				divImg.appendChild(objImg); // определили ее в див divImg 
				alert (divImg.firstChild);
			
														
							alert (objImg.height);	
							alert (objImg.width);							
								
							
							
			
				/*if (objImg.width > 0) {		*/	
						
						var heightImg = objImg.height; //изменяем высоту картинки			
							if (heightImg > 600) { //если картинка больше по высоте 600px, меняем ее высоту на 600, а ширину пропорционально
								objImg.width = objImg.width*(600/objImg.height);
								objImg.height = 600;								
							}
						
						var widthImg = objImg.width; //изменяем ширину картинки				
							if (widthImg > 1000) { //если картинка больше 1000px, меняем ее высоту на 1000, а ширину пропорционально
								objImg.height = objImg.height*(1000/objImg.width);
								objImg.width = 1000;													
							}
								//если картинка уже загрузилась
								if (objImg.width > 0){
								widthImg = objImg.width + 20; //узнаем ширину картинки, которая будет показана, увеличиваем на 20px
								}
								else {
								widthImg = 900;
								}
								
						divImg.appendChild(objImg); //добавляем ее в див для картинки
						setTimeout( function() { divImg.removeChild(objImgL) } , 950) //удалили картинку из DOM
						setTimeout( function() { objImg.setAttribute("style","visibility:visible") } , 1000)						
							
						
					divImg.style.width = widthImg+'px'; // Устанавливаем ширину диву, в котором картинка в зависимости от ее новой ширины
					
			/*	}
				else {	
				alert (objImg.width);			
				alert ('картинка еще не загрузилась');
				}*/
	
			divLay.onclick = function () { 							
			//divLay.setAttribute("style", "display:none;");  //скрываем слой при клике на нем
			document.body.removeChild(divLay); //NB! удаляет элемент из DOM						
			}	
	}
	
</script>


Код:
<div id="thumb_block" class="thumb_block">
    <a href="img/image-01.jpg" onclick="viewPicture(this); return false;"><img src="img/thumb-01.jpg" title="зеленый кактус"  /></a>
    <a href="img/image-02.jpg" onclick="viewPicture(this); return false;"><img src="img/thumb-02.jpg" title="море"  /></a>
    <a href="img/image-03.jpg" onclick="viewPicture(this); return false;"><img src="img/thumb-03.jpg" title="солнце"  /></a>
    <a href="img/image-04.jpg" onclick="viewPicture(this); return false;"><img src="img/thumb-04.jpg" title="вода"  /></a>
</div>
Ответить с цитированием