jquery – 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'},];

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

Demo

我做错了什么？

> 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',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);

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

原文地址：https://www.jb51.cc/jquery/181227.html

jquery – FancyBox通过AJAX获取图像的href

解决方法

相关推荐