1

jQuery-Image- GalleryjQueryプラグインを使用してい ます。フルスクリーンのjQueryフォトギャラリーです。私はそれをダウンロードし、そのデモで正常に動作しています。flickrへのajaxリクエストを使用して画像をロードします。以下の通りです。

$.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サーバーを持っています。これどうやってするの？

カスタムPHPファイルを使用して人為的に再作成できるように、AjaxJSONコールバック構造を知りたいです。

4

4 に答える 4

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);
    });
});
于 2012-05-11T17:31:00.590 に答える
1

PHPでは配列名が「images」であるため

echo json_encode(array('images' => $index)); // sending to array of images as JSON

jQueryでも同じ配列名が必要です(image ----> images)

$.each(data.images, function (index, photo) {
于 2012-06-18T02:34:47.450 に答える
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);

                });
           },
    });
于 2012-05-24T13:06:20.330 に答える
0

このスクリプトの URL をローカル ファイルに変更する必要があります。次に、json 文字列を ajax に出力する php スクリプトを作成する必要があります。これは使いやすいかもしれませんhttp://husbandman.org/husbandman/fotoexpose/

于 2012-05-11T17:26:25.440 に答える