Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблема с Popup окном (https://javascript.ru/forum/jquery/9943-problema-s-popup-oknom.html)

vovuslik 12.06.2010 12:44

Проблема с Popup окном
 
Вообщем проблема в следующем: хочу сделать popup окошко для изображений (что-то вроде сильно упрощенной версии highslide или fancybox). Варианты с Ajax контентом и iFrame'ом получились без проблем, а вот с изображениями проблема, точнее проблема в том, что после втавки изображения в попап окно, не могу получить его размеры (это необходимо сделать для того, чтобы его можно было автоматически ресайзить в зависимости от соотношения размеров изображения и экрана).
Итак сам скрипт :
jQuery(document).ready(function(){
  $("a.pop-image").click(
	function(e){
		var uri = $(this).attr("href");
		var heading = $(this).attr("title");
		e.preventDefault();
		$(".p-content").html('<h3 align="center">'+heading+'</h3><img id="pop-image" src="'+uri+'" />');
		var w_height = $(window).height()
		var p_height = $("#popup").height()
		if(p_height > w_height) {
			var image_height = $(".p-content img").height()
			alert (image_height);//Вот тут выводит "0"
		}
		popUp()
	})
})
function popUp() {
		var p_height = $("#popup").height()/2;
		var p_width = 480 - $("#popup").width()/2;
		$("#popup").css({"margin-top":"-"+p_height+"px","margin-left":p_width+"px"}).slideDown(600)
}

HTML код:
<div id="popup"> 
  <div class="p-tl">
    <div class="p-tr">
      <div class="p-tm"></div>
    </div>
  </div>
  <div class="p-ml">
    <div class="p-mr">
      <div class="p-mm">
        <div class="p-content"></div>
      </div>
    </div>
  </div>
  <div class="p-bl">
    <div class="p-br">
      <div class="p-bm"></div>
    </div>
  </div>
</div>

И CSS код:
Код:

#popup{display:none;min-width:300px;top:50%;;z-index:1000;position:fixed;color:#fff;}
.p-tl{background:url(../images/popup-corners.png) no-repeat left top;padding-left:40px;}
.p-tr{background:url(../images/popup-corners.png) no-repeat right -80px;padding-right:40px;}
.p-tm{background:url(../images/popup-corners.png) repeat-x left -40px;height:40px;}
.p-bl{background:url(../images/popup-corners.png) no-repeat left -120px;padding-left:40px;}
.p-br{background:url(../images/popup-corners.png) no-repeat right bottom;padding-right:40px;}
.p-bm{background:url(../images/popup-corners.png) repeat-x left -160px;height:40px;}
.p-ml{background:url(../images/popup-left.png) repeat-y left top;padding-left:21px;}
.p-mr{background:url(../images/popup-right.png) repeat-y right top;padding-right:21px;}
.p-mm{background:#0296cd;}

Вместо alert (image_height) в скрипте пойдет математика по ресайзу изображения, но пока нет смысла продолжать, так как значение image_height = 0.

Kolyaj 12.06.2010 13:06

Чтобы получить размеры изображения, надо сначала дождаться, пока оно загрузится.

vovuslik 12.06.2010 13:54

Ок! А как подождать пока оно загрузится? Я в этом не силен

Kolyaj 12.06.2010 13:55

У изображения есть событие onload.

vovuslik 12.06.2010 15:17

Цитата:

Сообщение от Kolyaj (Сообщение 59150)
У изображения есть событие onload.

Вы видимо не поняли о чем речь!

Kolyaj 12.06.2010 16:12

vovuslik,
нет, это вы видимо не поняли :)


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