[英]How to load loading local images using jQuery Image Gallery plugin
I am using jQuery-Image-Gallery jQuery plugin. 我正在使用jQuery-Image-Gallery jQuery插件。 It is a full-screen jQuery photo gallery. 这是一个全屏jQuery照片库。 I downloaded it and is working fine in its demo. 我下载了它并且在它的演示中运行良好。 It loads images using an ajax request to flickr. 它使用ajax请求将图像加载到flickr。 It is as follows; 它如下;
$.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);
});
});
This is working perfect. 这是完美的。 But I want to display my local files (in my localhost / server) in the images/photos
folder. 但我想在images/photos
文件夹中显示我的本地文件(在我的localhost / server中)。 I have PHP server. 我有PHP服务器。 How can I do this? 我怎样才能做到这一点?
I would like to know the Ajax JSON call back structure so that we can artificially recreate it using a custom PHP file. 我想知道Ajax JSON回调结构,以便我们可以使用自定义PHP文件人工重新创建它。
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: 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);
});
});
because array name is 'images' in PHP 因为数组名称是PHP中的“图像”
echo json_encode(array('images' => $index)); // sending to array of images as JSON
same array name is necessary in jQuery(image ----> images) jQuery中需要相同的数组名称(图像---->图像)
$.each(data.images, function (index, photo) {
You need to change your urls in this script to your local files. 您需要将此脚本中的URL更改为本地文件。 Then you need to write a php script that outputs a json string to the ajax. 然后你需要编写一个php脚本,将json字符串输出到ajax。 This might be easier to use http://husbandman.org/husbandman/fotoexpose/ 这可能更容易使用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);
});
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.