jquery small refactoring , json call

Posted by Alexander Corotchi on Stack Overflow See other posts from Stack Overflow or by Alexander Corotchi
Published on 2010-04-27T00:36:36Z Indexed on 2010/04/27 0:43 UTC
Read the original article Hit count: 420

Filed under:
|
|

Hi everybody,

I need you suggestion to make some refactoring in jquery code because now it looks terrible for me. I have 4 json calls but the difference it is just the URL call.

EX:

        var userId = MyuserID;
        var perPage = '45';
        var showOnPage = '45';

        var tag =  'tag1';
        var tag1 = 'tag2';
        var tag2 = 'tagn';


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo("#flickr ul");
            });
            $("#flickr a").fancybox();
        });


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tag1 + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos1 ul");
            });
            $(".Sets a").fancybox();
        });


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tagn + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos ul");
            });
            $(".Sets a").fancybox();
        });

var tag is only one difference in this url :

Can somebody help me not to repeat all this stuff ??

Sorry by so long garbage :(

© Stack Overflow or respective owner

Related posts about refactoring

Related posts about jQuery