小编典典

FancyBox通过AJAX获取图片的href

ajax

这是我的问题。

我使用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";
}

更新

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

阅读 307

收藏
2020-07-26

共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
(检查fancybox文档中的API方法):

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

或简单地

$.fancybox(dataXarrayObj, opts);

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

2020-07-26