的fancybox得到HREF通过AJAX图片 [英] FancyBox get href for images via AJAX
问题描述
下面是我的问题。
我用的fancybox用于显示图像，通过AJAX而获得。 没有当页面加载页面上不存在的图像，只有与画廊的名称属性链接。
所以，当我点击这个处理code以下链接：
$（。的fancybox手动-C）。生活（点击，函数（）{
$阿贾克斯（{
键入：POST，
数据：{加仑：$（本）.attr（'相对'）}，
网址：http://polygon.goracio.com.ua/gallery/getfiles.php，
//数据类型：JSON，
完成：功能（数据）{
VAR数据X = data.responseText;
执行console.log（data.responseText）;
VAR IMG = [
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30711.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-27082.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30988.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30858.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-23424.jpg'}]。
VAR选择采用= {
prevEffect：'无'，
nextEffect：'无'，
助手：{
大拇指：{
宽度：75，
高度：50
}
}
};
$ .fancybox（IMG，选择采用）;
}
}）;
}）;
该解决方案正常工作。但是当我使用
VAR IMG = [数据X]
而不是
VAR IMG = [
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30711.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-27082.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30988.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30858.jpg}，
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-23424.jpg'}]。
我获得弹出窗口的反响文本。
我在做什么错了？
- 的fancybox - jQuery插件
- 版本：2.0.5（21/02/2012）
- 的jQuery 1.7 - 最新
code'getfile.php的
函数directoryToArray（$目录，$递归=真）{
$ array_items =阵列（）;
如果（$处理=执行opendir（$目录））{
而（虚假！==（$文件= readdir的（$处理）））{
如果（$文件=放！。;＆安培;！$文件=..）{
如果（is_dir（$目录/。$档案））{
如果（$递归）{
$ array_items = array_merge（$ array_items，directoryToArray（$目录/$文件，$递归）。）;
}
$目录= str_replace函数（'./画廊/'，''，$目录）;
$文件= $目录。 /。 $文件;
$ array_items [] = preg_replace（/ \ / \ // SI，/，$文件）;
} 其他 {
$目录= str_replace函数（'./画廊/'，''，$目录）;
$文件= $目录。 /。 $文件;
$ array_items [] = preg_replace（/ \ / \ // SI，/，$文件）;
}
}
}
closedir（$处理）;
}
返回$ array_items;
}
标题（内容类型：text / plain的;字符集= UTF-8）;
$阵列= directoryToArray（./galleries/".$_POST['gal']）;
的foreach（$数组作为$数组）{
回声{HREF：/画廊/画廊/ $阵'} \ N的;
}
更新
$（。的fancybox-手动AJAX）。生活（点击，函数（）{
$阿贾克斯（{
键入：POST，
数据：{加仑：$（本）.attr（'相对'）}，
网址：http://polygon.goracio.com.ua/gallery/getfiles.php，
数据类型：文本，
完成：功能（数据）{
VAR数据X = data.responseText;
变种dataXsplit = dataX.split（，）;
VAR dataXarrayObj =新的Array（），我;
为（i的dataXsplit）{
如果（dataXsplit [I] .length）{//后.split删除最后一个空元素（）
dataXarrayObj [I] = $ .parseJSON（dataXsplit [I]）;
}
}
VAR选择采用= {
prevEffect：'无'，
nextEffect：'无'，
助手：{
大拇指：{
宽度：75，
高度：50
}
}
};
$ .fancybox（dataXarrayObj，选择采用）;
}
}）;
}）;
好了，你没有做错什么，但有很多因素在这种情况下，审议
首先，从你的Ajax调用你：
VAR数据X = data.responseText;
和的responseText 属性的获取响应数据作为一个字符串，所以代替的阵列的fancybox显示器等的字符串的。
您需要做什么作为一种解决方法是将这样的字符串的进入一个JavaScript的对象的这样的fancybox可以解析它。有不同的方式来做到这一点。一种是使用的eval（）的功能，但可以有安全问题，所以这种方法不推荐使用。
由于您使用jQuery，你最安全的方式做到这一点是使用 jQuery.parseJSON（JSON） ，但你必须确保你会被转换成一个结构完整的JSON字符串。
在你的情况，你的getfile.php文件似乎是呈现这种格式
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30711.jpg'} ....
但良好的JSON字符串应该是这样的：
{HREF：/画廊/画廊/ gallery1 / wallpapers_by_ellin-30711.jpg}，...
注意强制性的双引号的
一旦你确信 data.responseText 返回字符串的，如：
那么你可以1）。分裂的字符串的，2）。每次转换元件分离成一个JavaScript的对象的3）。喜欢的对象，将其放置到的阵列的：
VAR dataXsplit = dataX.split（''）;
VAR dataXarrayObj =新的Array（），我;
为（i的dataXsplit）{
dataXarrayObj [I] = jQuery.parseJSON（dataXsplit [I]）;
}
在这之后，你可以解雇的fancybox与适当的阵列的对象（签入的的fancybox文档）无论是这样做的：
VAR IMG = dataXarrayObj;
$ .fancybox（IMG，选择采用）;
或只是
$的fancybox（dataXarrayObj，选择采用）;
请注意，您不需要封闭的阵列的在 [] 括号
Here is my problem.
I use FancyBox for showing images, which getting via AJAX. There isn't exist images on page when page is loaded, only links with attributes with names of galleries.
So, when I click on one of these links handled this code:
$(".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);
}
});
});
This solution works fine. But when I use
var img = [dataX];
instead of
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'},];
I'm get Pop-up window with responce text.
What i'm doing wrong?
- fancyBox - jQuery Plugin
- version: 2.0.5 (21/02/2012)
- jQuery 1.7 - latest
code of '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);
}
});
});
Well, you are not doing anything wrong but there are many factors to consider in this scenario
First, from your ajax call you get:
var dataX = data.responseText;
and the responseText property gets the response data as a string, so fancybox displays such string instead of the array of images.
What you have to do as a workaround is to convert such string into a javascript object so fancybox can parse it. There are different ways to do it. One is using the eval() function, but there can be security issues so this method is not recommended.
Since you are using jQuery, your safest way to do it is to use jQuery.parseJSON( json ), however you have to be sure that you will be converting a well-formed JSON string.
In your case, your "getfile.php" file seems to be rendering this format
{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'},....
but a well-formed JSON string should look like:
{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg"},...
notice the mandatory double quotes.
Once you are sure that data.responseText returns a string like:
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;
then you can 1). split the string, 2). convert every separated element into a javascript object and 3). place it into an array of objects like:
var dataXsplit = dataX.split(',');
var dataXarrayObj = new Array(), i;
for(i in dataXsplit){
dataXarrayObj[i] = jQuery.parseJSON(dataXsplit[i]);
}
after that, you can fire fancybox with the proper array of objects (check API methods in the fancybox documentation) either doing:
var img = dataXarrayObj;
$.fancybox(img, opts);
or simply
$.fancybox(dataXarrayObj, opts);
Notice that you don't need to enclose the array in [] brackets
这篇关于的fancybox得到HREF通过AJAX图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
