помогите: при клике на изображение оно не загружается с первого раза. а в 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> |
