这是我的问题。
我使用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'}, {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'},];
我得到带有响应文本的弹出窗口。
演示版
我做错了什么?
“ getfile.php”的代码
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"; }
更新
$(".fancybox-manual-ajax").live('click',function() { $.ajax({ type : 'POST', data : {'gal' : $(this).attr('rel')}, url : 'http://polygon.goracio.com.ua/gallery/getfiles.php', 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', nextEffect : 'none', helpers : { thumbs : { width: 75, height: 50 } } }; $.fancybox(dataXarrayObj, opts); } }); });
好吧,您没有做错任何事情,但是在这种情况下有很多因素要考虑
首先,通过ajax调用,您将获得:
var dataX = data.responseText;
并且该responseText属性以字符串形式获取响应数据,因此fancybox将显示该 字符串 而不是图像 数组 。
responseText
解决方法是将此类 字符串 转换为javascript 对象, 以便fancybox可以对其进行解析。有不同的方法可以做到这一点。一种是使用该eval()功能,但可能存在安全问题,因此不建议使用此方法。
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
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 (检查fancybox文档中的API方法):
var img = dataXarrayObj; $.fancybox(img, opts);
或简单地
$.fancybox(dataXarrayObj, opts);
请注意,您不需要将 数组 括在[]方括号中
[]