如何使用jQuery图像库插件加载加载本地图像
How to load loading local images using jQuery Image Gallery plugin
我正在使用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
?>
j查询:
$.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);
});
});
因为数组名称在 PHP 中是"images"
echo json_encode(array('images' => $index)); // sending to array of images as JSON
在jQuery中需要相同的数组名称(图像---->图像)
$.each(data.images, function (index, photo) {
您需要将此脚本中的 url 更改为本地文件。然后你需要编写一个 php 脚本,将 json 字符串输出到 ajax。这可能更容易使用 http://husbandman.org/husbandman/fotoexpose/
$.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);
});
},
});
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像