如何使用jQuery Image Gallery插件加載本地圖片

我正在使用jQuery-Image-Gallery jQuery插件。它是一個全屏jQuery照片庫。我下載了它，並且在演示中工作正常。它使用ajax請求將圖像加載到flickr。具體如下：如何使用jQuery Image Gallery插件加載本地圖片

$.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文件人爲地重新創建它。

來源

2012-05-11 blasteralfred Ψ

你有什麼路徑結構，以圖像文件夾> –

它僅僅是一個名爲圖片文件夾中的照片子文件。它包含img1.jpg，img2.jpg，img3.jpg等。 –

$.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-24 13:06:20

您需要將此腳本中的網址更改爲本地文件。然後你需要編寫一個php腳本，輸出一個json字符串給ajax。這可能是更容易使用http://husbandman.org/husbandman/fotoexpose/

來源

2012-05-11 17:26:25 Elliott

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-11 17:31:00

我不明白你的意思。你能提供JS和PHP的完整腳本嗎？ –

@blasteralfred你可以嘗試使用上面的代碼，並根據需要進行更改 –

因爲數組名是在PHP

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

'圖像'

同一數組名是必要的，jQuery的（形象---->圖片）

$.each(data.images, function (index, photo) {

來源

2012-06-18 02:34:47 yubi

如何使用jQuery Image Gallery插件加載本地圖片

回答

相關問題