加載flickr圖片由div中的一組jquery mobile

我正在創建一個jquery移動應用程序;這是腳本來加載它正在加載的div中的flickr照片縮略圖，但它出現在組縮略圖不加載每個images.can通過編輯這個來加載每個縮略圖。我只是刪除了我的API密鑰和我的ID。加載flickr圖片由div中的一組jquery mobile

$(function() { 
var api_key    = 'API KEY'; 
var user_id    = 'ID'; 
var photoset_id   = 'PHOTO SET ID'; 

var large_image_size = 'Medium'; 

var photoset_id,photo_id; 
var current = -1; 
var continueNavigation = false; 


var photos_service  = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos' + '&api_key=' + api_key; 
var photos_url   = photos_service + '&photoset_id=' + photoset_id + '&media=photos&format=json&jsoncallback=?'; 

var large_photo_service = 'http://api.flickr.com/services/rest/?&method=flickr.photos.getSizes' + '&api_key=' + api_key; 

var $photosContainer = $('#images').find('#ba'); 
var $photopreview  = $('#flickr_photopreview'); 
var $flickrOverlay  = $('#flickr_overlay'); 
var $loadingStatus  = $('.loading_small'); 


$(function(){ 
    $('#images').stop().animate(200,function(){ 
     if($photosContainer.is(':empty')){ 
      /* 
      if sets not loaded, load them 
      */ 
      LoadPhotos(); 
     } 
    }); 
},function(){ 

}); 



function LoadPhotos(){ 
    $photosContainer.empty(); 
    $loadingStatus.css('visibility','visible'); 

    $.getJSON(photos_url,function(data){ 
     if(data.stat != 'fail') { 
      var photo_count = data.photoset.photo.length; 
      var photo_count_total = photo_count ; 

      for(var i = 0; i < photo_count; ++i){ 
       var photo   = data.photoset.photo[i]; 
       var photoid   = photo.id; 

       var secret   = photo.secret; 
       var server   = photo.server; 
       var farm   = photo.farm; 

       var photoUrl  = 'http://farm'+farm+'.static.flickr.com/'+server+'/'+photoid+'_'+secret+'_s.jpg'; 

       var $elem   = $('<div />'); 
       var $link   = $('<a class="toLoad" href="#" />'); 

       $link.data({ 
        'photoid'  :photoid, 
        'secret'  :secret, 
        'server'  :server, 
        'farm'   :farm, 
        'photoUrl'  :photoUrl, 
        'photo_title' :photo.title 
       }); 
       $photosContainer.append($elem.append($link)); 

       $link.bind('click',function(e){ 
        var $this = $(this); 
        current  = $this.parent().index(); 
        photo_id = $this.data('photoid'); 
        LoadLargePhoto(); 
        e.preventDefault(); 
       }); 
      } 
      LoadPhotosImages(); 
     } 

    }); 
} 



function LoadPhotosImages(){ 
    var toLoad   = $('.toLoad:in-viewport').size(); 
    if(toLoad > 0) 
     $loadingStatus.css('visibility','visible'); 
    var images_loaded = 0; 

    $('.toLoad:in-viewport').each(function(i){ 
     var $space   = $photosContainer.find('.toLoad:first'); 
     var $img   = $('<img style="display:none;" />').load(function(){ 
      ++images_loaded; 
      if(images_loaded == toLoad){ 
       $loadingStatus.css('visibility','hidden'); 
       $photosContainer.find('img').fadeIn(); 

      } 
     }).error(function(){ 
      //TODO 
      ++images_loaded; 
      if(images_loaded == toLoad){ 
       $loadingStatus.css('visibility','hidden'); 
       $photosContainer.find('img').fadeIn(); 

      }    
     }).attr('src',$space.data('photoUrl')) 
      .attr('alt',$space.data('photoid')); 

     var $photo_title = $('<span/>',{'html':$space.data('photo_title')}); 
     $space.append($photo_title).append($img).removeClass('toLoad'); 
    }); 
}

來源

2012-05-18 tempor

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="js/jquery-latest.js"></script> 
<script type="text/javascript"> 

function downloadImg() { 
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 
     { 
      ids : "[email protected]", 
      tags: "", 
      tagmode: "any", 
      format: "json", 
     }, 

     function(data) { 
      $('.img-1').attr('src', data.items[0].media.m); 
      $('.tit-1').text(data.items[0].title); 

      $('.img-2').attr('src', data.items[1].media.m); 
      $('.tit-2').text(data.items[1].title); 
     } 
    ); 
} 

$(document).ready(function() { 
     downloadImg(); 
}); 
</script> 
</head> 
<body> 
<div class="img-cont"><img class="img-1" /> </div> 
<h3 class="tit-1"></h3> 

<div class="img-cont"><img class="img-1" /> </div> 
<h3 class="tit-1"></h3> 

</body> 
</html>

來源

2012-05-29 16:28:17

加載flickr圖片由div中的一組jquery mobile

回答

相關問題