这是我的问题.
我使用fancybox显示图像,通过AJAX获取.
加载页面时页面上不存在图像,仅链接具有图库名称的属性.
$(".fancybox-manual-c").live('click',function() { $.ajax({ type : 'POST',data : {'gal' : $(this).attr('rel')},url : 'http://polygon.goracio.com.ua/gallery/getfiles.PHP',//dataType: 'json',complete: function(data) { var datax = data.responseText; console.log(data.responseText); var img = [ {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'},{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-27082.jpg'},{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30988.jpg'},{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30858.jpg'},{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-23424.jpg'},]; var opts = { prevEffect : 'none',nextEffect : 'none',helpers : { thumbs : { width: 75,height: 50 } } }; $.fancybox(img,opts); } }); });
此解决方案工作正常.但是当我使用时
var img = [datax];
代替
var img = [ {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'},];
我得到带有响应文本的弹出窗口.
我做错了什么?
> fancybox – jQuery插件
>版本:2.0.5(21/02/2012)
> jQuery 1.7 – 最新
function directoryToArray($directory,$recursive = true) { $array_items = array(); if ($handle = opendir($directory)) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != "..") { if (is_dir($directory. "/" . $file)) { if($recursive) { $array_items = array_merge($array_items,directoryToArray($directory. "/" . $file,$recursive)); } $directory = str_replace('./galleries/','',$directory); $file = $directory . "/" . $file; $array_items[]= preg_replace("/\/\//si","/",$file); } else { $directory = str_replace('./galleries/',$directory); $file = $directory . "/" . $file; $array_items[] = preg_replace("/\/\//si",$file); } } } closedir($handle); } return $array_items; } header("Content-type: text/plain;charset=utf-8"); $arrays = directoryToArray( "./galleries/".$_POST['gal']); foreach($arrays as $array){ echo "{href:'/gallery/galleries/$array'},\n"; }
UPDATE
$(".fancybox-manual-ajax").live('click',function() { $.ajax({ type : 'POST',dataType: 'text',complete: function(data) { var datax = data.responseText; var dataxsplit = datax.split(','); var dataxarrayObj = new Array(),i; for(i in dataxsplit){ if(dataxsplit[i].length){ //remove last empty element after .split() dataxarrayObj[i] = $.parseJSON(dataxsplit[i]); } } var opts = { prevEffect : 'none',helpers : { thumbs : { width: 75,height: 50 } } }; $.fancybox(dataxarrayObj,opts); } }); });
解决方法
好吧,你没有做错任何事情,但在这种情况下需要考虑很多因素
首先,从你的ajax电话中你得到:
var datax = data.responseText;
和responseText属性gets the response data as a string,所以fancybox显示这样的字符串而不是图像数组.
您需要做的解决方法是将此类字符串转换为javascript对象,以便fancybox可以解析它.有不同的方法来做到这一点.一个是使用eval()函数,但可能存在安全问题,因此不建议使用此方法.
由于您使用的是jQuery,最安全的方法是使用jQuery.parseJSON( json ),但是您必须确保转换格式正确的JSON字符串.
在您的情况下,您的“getfile.PHP”文件似乎呈现此格式
{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'},....
但格式良好的JSON字符串应如下所示:
{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg"},...
注意强制性双引号.
一旦你确定data.responseText返回一个字符串,如:
data.responseText='{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg"},{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-27082.jpg"},etc ....' var datax = data.responseText;
那么你可以1).拆分字符串,2).将每个分离的元素转换为javascript对象和3).将它放入一个对象数组中,如:
var dataxsplit = datax.split(','); var dataxarrayObj = new Array(),i; for(i in dataxsplit){ dataxarrayObj[i] = jQuery.parseJSON(dataxsplit[i]); }
之后,您可以使用适当的对象数组(在fancybox documentation中检查API方法)来启动fancybox:
var img = dataxarrayObj; $.fancybox(img,opts);
或简单地说
$.fancybox(dataxarrayObj,opts);
请注意,您不需要将数组括在[]括号中