我正在使用 jQuery-Image-Gallery jQuery插件。这是一个全屏jQuery照片库。我下载了它并且在它的演示中运行良好。它使用ajax请求将图像加载到flickr。如下;
$.ajax({
url: 'http://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
api_key: '7617adae70159d09ba78cfec73c13be3'
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (data) {
var gallery = $('#gallery'),
url;
$.each(data.photos.photo, function (index, photo) {
url = 'http://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
$('<a rel="gallery"/>')
.append($('<img>').prop('src', url + '_s.jpg'))
.prop('href', url + '_b.jpg')
.prop('title', photo.title)
.appendTo(gallery);
});
});
这是完美的。但我想在images/photos
文件夹中显示我的本地文件(在我的localhost / server中)。我有PHP服务器。我怎么能这样做?
我想知道Ajax JSON回调结构,以便我们可以使用自定义PHP文件人工重新创建它。
答案 0 :(得分:2)
<强> PHP:强>
<?php
$path = dirname(__FILE__). '/images/photo'; // you may need to change the path
/**
Use 'opendir(".")' if the PHP file is in the same folder as your images.
Or set a relative path 'opendir("../path/to/folder")'.
*/
$folder = opendir($path);
$pic_types = array("jpg", "jpeg", "gif", "png"); // restrict the extension [optional]
$index = array();
// looping over the images and push them into array
while ($file = readdir ($folder)) {
if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
{
array_push($index,$file);
}
}
closedir($folder); // close the dir opended by opendir()
echo json_encode(array('images' => $index)); // sending to array of images as JSON
?>
<强> jQuery的:强>
$.ajax({
url: 'images.php', // assume that you php file name is images.php [change as you need]
dataType: 'json', // as you send request to same domain, so you don't need jsonp
}).done(function (data) {
var gallery = $('#gallery'),
url = '';
// data.images contain the name of images as array
$.each(data.image, function (index, photo) {
url = '/images/photo/' + photo; // photo will contain only image name
$('<a rel="gallery"/>')
.append($('<img>').prop('src', url + '_s.jpg'))
.prop('href', url + '_b.jpg')
.prop('title', photo.title)
.appendTo(gallery);
});
});
答案 1 :(得分:1)
因为数组名称是PHP中的“图像”
echo json_encode(array('images' => $index)); // sending to array of images as JSON
jQuery(image ----&gt; images)
中需要相同的数组名称$.each(data.images, function (index, photo) {
答案 2 :(得分:0)
您需要将此脚本中的网址更改为本地文件。然后你需要编写一个php脚本,将json字符串输出到ajax。这可能更容易使用http://husbandman.org/husbandman/fotoexpose/
答案 3 :(得分:0)
$.ajax({
type: 'POST',
url: 'ajax.php',
dataType: 'json',
cache: false,
success: function(result) {
$.each(result, function(key,val){
var gallery = $('#gallery'), url;
url = val;
$('<a rel="gallery"/>')
.append($('<img>').prop('src', 'images/thumbs/' + url))
.prop('href', 'images/photos/' + url)
.prop('title', url)
.appendTo(gallery);
});
},
});