Вообщем проблема в следующем: хочу сделать 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.
