Показать сообщение отдельно
  #1 (permalink)  
Старый 12.06.2010, 12:44
Новичок на форуме
Отправить личное сообщение для vovuslik Посмотреть профиль Найти все сообщения от vovuslik
 
Регистрация: 12.06.2010
Сообщений: 3

Проблема с 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.
Ответить с цитированием