Javascript 如何使用jQuery图像库插件加载本地图像
我正在使用jQuery插件。这是一个全屏jQuery照片库。我下载了它,在它的演示中运行良好。它使用ajax请求将图像加载到flickr。具体如下:Javascript 如何使用jQuery图像库插件加载本地图像,javascript,json,jquery,Javascript,Json,Jquery,我正在使用jQuery插件。这是一个全屏jQuery照片库。我下载了它,在它的演示中运行良好。它使用ajax请求将图像加载到flickr。具体如下: $.ajax({ url: 'http://api.flickr.com/services/rest/', data: { format: 'json', method: 'flickr.interestingness.getList', api_key: '7617adae70159
$.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);
});
});
$.ajax({
网址:'http://api.flickr.com/services/rest/',
数据:{
格式:“json”,
方法:“flickr.interestingness.getList”,
api_键:“7617adae70159d09ba78cfec73c13be3”
},
数据类型:“jsonp”,
jsonp:'jsoncallback'
}).完成(功能(数据){
var gallery=$(“#gallery”),
网址;
$.each(data.photos.photo,函数(索引,照片){
url='1〕http://farm“+photo.farm+”.static.flickr.com/”+
photo.server+'/'+photo.id+'.'+photo.secret;
$('')
.append($('
这很好用。但是我想在images/photos
文件夹中显示我的本地文件(在我的本地主机/服务器中)。我有PHP服务器。我该怎么做
我想知道Ajax JSON回调结构,以便我们可以使用自定义PHP文件人工重新创建它。您需要将此脚本中的URL更改为本地文件。然后您需要编写一个PHP脚本,将JSON字符串输出到Ajax。这可能更易于使用
<?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
?>
$.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);
});
});
$.ajax({
键入:“POST”,
url:'ajax.php',
数据类型:“json”,
cache:false,
成功:功能(结果){
$。每个(结果、函数(键、值){
var gallery=$('#gallery'),url;
url=val;
$('')
.append($('因为数组名在PHP中是'images'
echo json_encode(array('images' => $index)); // sending to array of images as JSON
jQuery中需要相同的数组名(image-->images)
图像文件夹的路径结构是什么>它只是一个名为photos inside images folder的子文件夹。它包含img1.jpg、img2.jpg、img3.jpg等。我不完全理解你。你能提供JS和PHP的完整脚本吗?@blasteralfred你可以尝试上面的代码,并在需要的地方进行更改
echo json_encode(array('images' => $index)); // sending to array of images as JSON
$.each(data.images, function (index, photo) {