我正在使用 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
文件夹中显示我的本地文件(在我的本地主机/服务器中)。我有 PHP 服务器。我该怎么做?
我想知道 Ajax JSON 回调结构,以便我们可以使用自定义 PHP 文件人为地重新创建它。
最佳答案
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);
});
});
关于javascript - 如何使用jQuery Image Gallery插件加载加载本 map 片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10555578/