FancyBox通过AJAX获取图像的href

这是我的问题。

我使用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'},]; 

我得到带有响应文本的弹出窗口。

演示

我做错了什么？

• fancyBox – jQuery插件
• 版本：2.0.5（21/02/2012）
• jQuery 1.7 – 最新

‘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"; } 

UPDATE

  $(".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); } }); }); 

Answer 1

好吧，你没有做错任何事情，但在这种情况下需要考虑很多因素

首先，从你的ajax电话中你得到：

 var dataX = data.responseText; 

并且responseText属性将响应数据作为字符串获取 ，因此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文档中检查API方法）来启动fancybox ：

 var img = dataXarrayObj; $.fancybox(img, opts); 

或简单地说

 $.fancybox(dataXarrayObj, opts); 

请注意，您不需要将数组括在[]括号中

Answer 2

代替：

 var dataXsplit = dataX.split(','); var dataXarrayObj = new Array(), i; for(i in dataXsplit){ dataXarrayObj[i] = jQuery.parseJSON(dataXsplit[i]); } 

你可以做：

 var img = JSON.parse(data.responseText); 

所以这一切都是这样的：

 Xhr.onload = function() { var img = JSON.parse(Xhr.responseText); $.fancybox(img, { padding: 0, openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 150, closeClick : true }); };