Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2010, 13:06
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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

Ок! А как подождать пока оно загрузится? Я в этом не силен
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2010, 13:55
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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

Сообщение от Kolyaj Посмотреть сообщение
У изображения есть событие onload.
Вы видимо не поняли о чем речь!
Ответить с цитированием
  #6 (permalink)  
Старый 12.06.2010, 16:12
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

vovuslik,
нет, это вы видимо не поняли
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с модальным окном nastya jQuery 2 06.02.2010 14:04
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47