Задача : Получаю JSON от сервера, рисую дерево мини-изображений...
fancybox не срабатывает...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<?php
$rel = "myrel";
$class = "";
$id = "";
?>
<script type="text/javascript">
$(document).ready(function() {
//$("a[rel=myrel]").fancybox();
var imgObj = new Image();
var i = 0;
function viewLoadedImage(imgObj, imgsJsonArr){
if (imgsJsonArr[i] != undefined ) {
if(imgsJsonArr[i].comment == null) { imgsJsonArr[i].comment = ""; }
$("#miniatur-loader").show();
imgObj[i] = new Image();
$(imgObj[i]).load(function () {
$(this).hide();
$("#miniatur-images")//.append($("<div class='mini-img-div'>")
.append($("<a rel='myrel' class='aaa' href='"+imgsJsonArr[i].big_pic_path+"'title='"+imgsJsonArr[i].comment+"' >")
.append(this));
$(this).fadeIn();
$(this).show();
$("#miniatur-loader").fadeOut();
}).error(function(){
$(this).attr("src","imgs/no_image.png"); // WORCK
}).attr('src', imgsJsonArr[i].sm_pic_path)
.attr("class","miniature-img")
.css({"display":"inline-block"});
//$("a[rel=myrel]").fancybox();
setTimeout(function(){
//setInterval(function(){
i++;
viewLoadedImage(imgObj, imgsJsonArr);
},250);
}else{}
//Fn END
}
// -> AJAX for miniature Images
//setInterval(miniaturesImagesLoad,3000);
//var langCookie = $.cookie("lang");
var jsonReq = "jsonReqImg=getImgMiniature";
miniaturesImagesLoad(jsonReq);
function miniaturesImagesLoad(jsonReq){
$.ajax({
type: "GET",
url: "ajax.php",
data: jsonReq,
success: function(data){
//$("a[rel=myrel]").fancybox({});
var imgsJsonArr = JSON.parse(data);
viewLoadedImage(imgObj, imgsJsonArr);
qwe();
}
});
// Fn End
}
function qwe(){
//$(".aaa").bind("click",function(){
$("a[rel=myrel]").bind("click",function(){
//alert("qwe");
$("a[rel=myrel]").fancybox();
})
}
//ALL END
});
</script>
</head>
<body>
<div id="content">
<div id="miniatur-images"></div>
<!-- ТЕСТОВЫЕ КАРТИНКИ записанные в ФАЙЛ ---!>
<a id="<?=$id?>" rel="<?=$rel?>" class="<?=$class?>" title="" href="photos/vary_big.jpg">
<img class="miniature-img" src="photos/small_8.jpg" style="display: inline-block;">
</a>
<a id="<?=$id?>" rel="<?=$rel?>" class="<?=$class?>" title="" href="photos/big_12.jpg">
<img class="miniature-img" src="photos/small_12.jpg" style="display: inline-block;">
</a>
<a id="<?=$id?>" rel="<?=$rel?>" class="<?=$class?>" title="" href="photos/big_7.jpg">
<img class="miniature-img" src="photos/small_7.jpg" style="display: inline-block;">
</a>
<a id="<?=$id?>" rel="<?=$rel?>" class="<?=$class?>" title="Изображение номер 1" href="photos/big_1.jpg">
<img class="miniature-img" src="photos/small_1.jpg" style="display: inline-block;">
</a>
<a id="<?=$id?>" rel="<?=$rel?>" class="<?=$class?>" title="" href="photos/big_2.jpg">
<img class="miniature-img" src="photos/small_2.jpg" style="display: inline-block;">
</a>
</div>
</body>
</html>
Однако, если сначала нажать на Изображение которое записано в файл, а потом на жать на ту которая пришла JSOM-ом все работатет...
Как исправить !!!
Спустя 29 минут, 27 секунд (11.07.2012 - 01:11) RCuPeR написал(а):
function qwe(){
//$(".aaa").bind("click",function(){
$("a[rel=myrel]").bind("click",function(){
//alert("qwe");
$("a[rel=myrel]").fancybox();
})
}
//ALL END
});
Попробуй так:
function qwe(){
//$(".aaa").bind("click",function(){
$("a[rel=myrel]").live("click",function(){
//alert("qwe");
$("a[rel=myrel]").fancybox();
})
}
//ALL END
});
Спустя 4 минуты, 7 секунд (11.07.2012 - 01:15) hilton_413 написал(а):
$("a[rel=myrel]").live("click",function(){
Пробовал не срабатывает ...
Пробовал не срабатывает ...
Спустя 3 минуты, 42 секунды (11.07.2012 - 01:19) RCuPeR написал(а):
Ааа, так подожди... А зачем тебе заворачивать вызов фансибокса в функцию ?!
Функцию-то ты вызвал раз, при удачном завершении аякса, и все, функция умерла.
Функцию-то ты вызвал раз, при удачном завершении аякса, и все, функция умерла.
Спустя 5 минут, 23 секунды (11.07.2012 - 01:24) hilton_413 написал(а):
Поподробнее,
да как только не пробовал, как посоветушь.. по другому..
да как только не пробовал, как посоветушь.. по другому..
Спустя 6 минут, 31 секунда (11.07.2012 - 01:31) RCuPeR написал(а):
Убей функцию qwe() и ее вызов, и вместо
в самом начале скрипта, вставь
//$("a[rel=myrel]").fancybox();в самом начале скрипта, вставь
$("a[rel=myrel]").live("click",function(){
//alert("qwe");
$("a[rel=myrel]").fancybox();
});
Спустя 10 минут, 59 секунд (11.07.2012 - 01:42) hilton_413 написал(а):
Также все,
Работает, только после срабатывания Тестовых картинок..
Фотка в новом окне...
Работает, только после срабатывания Тестовых картинок..
Фотка в новом окне...
Спустя 26 минут, 20 секунд (11.07.2012 - 02:08) hilton_413 написал(а):
RCuPeR, Спасибо....
Разобрался в чем проблема работатет....
jQuery 1.7+
$("#miniatur-images").on("focusin",function(){
$("a[rel=myrel]").fancybox();
})
http://stackoverflow.com/questions/9081571...9084293#9084293
Разобрался в чем проблема работатет....
jQuery 1.7+
$("#miniatur-images").on("focusin",function(){
$("a[rel=myrel]").fancybox();
})
http://stackoverflow.com/questions/9081571...9084293#9084293