скрипт галереи
помогите: при клике на изображение оно не загружается с первого раза. а в 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"> |
а зачем setAttribute? Попробуй свойства назначить. И вообще может можно сделать меньше кода, если почаще innerHTML использовать?
|
Цитата:
|
B~Vladi,
они друг друга не заменяют, а прекрасно дополняют. :) |
попытался сократить код... сократил... лучче не стало...
все равно не хочит с первого раза картинку открывать
function viewPicture(imgUrl) {
debugger;
hiddenImg = new Image();
hiddenImg.src = imgUrl;
var heightImg = hiddenImg.height;
if (heightImg > 600) {
hiddenImg.width = hiddenImg.width*(600/hiddenImg.height);
hiddenImg.height = 600;
}
h = hiddenImg.height;
var widthImg = hiddenImg.width;
if (widthImg > 1000) {
hiddenImg.height = hiddenImg.height*(1000/hiddenImg.width);
hiddenImg.width = 1000;
}
w = hiddenImg.width;
var divLay = document.createElement("div");
divLay.setAttribute("id", "gallery");
divLay.innerHTML = "<div id='imgcont'><a href=''>закрыть</a><p>картинка</p><img src="+imgUrl+" width="+w+" height="+h+" /></div>";
document.body.appendChild(divLay);
divLay.onclick = function () {
document.body.removeChild(divLay);
}
}
как вариант осталось сократить до нуля :)) |
о... начианет проясняться, что ты делаешь. Лучше назначь обработчик load изображения (до назначения src), в котором делай последующие действия и вставляй в dom загруженную картинку, а не еще один img
|
переделал, ввел onload. только в ie все равно не все картинки грузятся. и если каждую картинку по одному разу открыть, второй раз ресайз не работает...((
function viewPicture(imgUrl) {
//debugger;
hiddenImg = new Image();
hiddenImg.src = imgUrl;
hiddenImg.onload=function resize() {
//alert ('onload');
hiddenImgHeight = hiddenImg.height;
hiddenImgWidth = hiddenImg.width;
// alert(hiddenImgHeight+' высота');
// alert(hiddenImgWidth+' ширина');
if (hiddenImgHeight > 600) {
hiddenImg.width = hiddenImg.width*(600/hiddenImg.height);
hiddenImg.height = 600;
}
if (hiddenImgWidth > 1000) {
hiddenImg.height = hiddenImg.height*(1000/hiddenImg.width);
hiddenImg.width = 1000;
}
// alert(hiddenImg.width+' высота');
// alert(hiddenImg.height+' ширина');
} //hiddenImg.onload=function()
var divLay = document.createElement("div");
divLay.setAttribute("id", "gallery");
divLay.innerHTML = "<div id='imgcont'><a href=''>закрыть</a><p>картинка</p></div>";
document.body.appendChild(divLay);
document.getElementById("imgcont").appendChild(hiddenImg);
divLay.onclick = function () {
document.body.removeChild(divLay);
}
}
|
Цитата:
|
я немного недогоняю, так как начал совсем недавно изучать javascript, так, чтобы свое что-то написать... если я назначу src после onload, что тогда браузер загружать будет, чьей загрузки мы ждем?
вот еще стили:
<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>
<style>
/* CSS Document
* { -moz-box-sizing: border-box; box-sizing: border-box; } */
html { height: 100%; width: 100%; /*min-widht: 980px*/ }
body { padding: 0; margin: 0; width: 100%; height: 100%; background: #fff; font-family: Arial, sans-serif; font-size: 75%; min-widht: 980px}
DIV.conteiner { min-height:100%; height:auto !important; height:100%; margin: 0 auto -50px;}
DIV.footer, DIV.push {height:50px;}
DIV.footer { background: #006633; color: #fff; font-size: 10px; text-align: right; padding-top: 10px; padding-right: 10px}
DIV.conteiner h1 { margin-left: 60px}
div.thumb_block { margin: 50px 0 0 350px;}
/*div#overlay { height: 100%; widht: 100%; position: fixed; top: 0; left: 0; background: #0033CC; z-index: 5 }*/
div#gallery { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10; /*background: #006633; opacity: 0.8; filter: alpha(opacity=80); */ background: url(../img/fon.png) repeat}
div#imgcont { position: relative; z-index: 15; border: 1px solid #fff; margin: 50px auto; text-align: center; background: #006600; overflow: hidden}
div#imgcont img { margin: 0px; margin-bottom: 10px}
div#imgcont p { color: #fff; }
div#imgcont a { color: #FFFFFF;}
div#divPre { overflow: hidden; height: 0; width: 0; }
</style>
|
| Часовой пояс GMT +3, время: 04:22. |