0

私はjqueryモバイルアプリケーションを作成しています。これは、読み込んでいるdivにflickrの写真のサムネイルを読み込むためのスクリプトですが、各画像を読み込んでいないグループのサムネイルに表示されています。これを編集して各サムネイルを読み込むことができます。APIキーを削除しましたそして私のID。

$(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');
    });
}
4

1 に答える 1

0 
<!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 : "78368944@N06",
            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-29T16:28:17.197 に答える