Home/ Questions/Q 1004455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:08:12+00:00

I’m just getting started with jQuery. I was using it to make a photo

  • 0

I’m just getting started with jQuery. I was using it to make a photo gallery that pulls photos and their information from Flickr. The script is shown below

<html>
<head>
    <title>Flickr Test</title>

<script src="http://rhol.squarespace.com/storage/js/jquery.js" type="text/javascript"></script>
<script src="http://rhol.squarespace.com/storage/js/fancybox/jquery.fancybox-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://rhol.squarespace.com/storage/js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />



<script>
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getInfo&api_key=db05e5f5e5c2151218cc06545aaae27e&photoset_id=72157624591740770&format=json&jsoncallback=?",
    function(data2){
    $("#setName").text(data2.photoset.title._content);
    $("#setDesc").text(data2.photoset.description._content);
    });
    $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=db05e5f5e5c2151218cc06545aaae27e&photoset_id=72157624591740770&format=json&jsoncallback=?",
        function(data1){
            $.each(data1.photoset.photo, function(k,item){
                var baseurl = 'http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret;
                $("<tr><td id=\"image"+k+"\"><a> </a></td><td id=\"desc"+k+"\"></td></tr><tr />").appendTo("#images");
                $("#image"+k+" > a").attr("href",baseurl + "_b.jpg").attr("rel","mylightbox[photoset]").attr("class","gallery");
                $("<img/>").attr("src",baseurl+'_m.jpg').appendTo("#image"+k+" > a");
                $("a.gallery").fancybox({'titlePosition':'inside'});
                $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=db05e5f5e5c2151218cc06545aaae27e&photo_id="+item.id+"&format=json&jsoncallback=?",
                function(data2){
                    $("#desc"+k).text(data2.photo.description._content);
        $("#image"+k+" > a").attr("title",data2.photo.description._content);
                });
            });
        });
</script>

</head>
<body>
    <a name="top"></a><br />
    <h1 id="setName"></h1>
<h3 id="setDesc"></h3>
    <br />
<table id="images">
</table>
    <a href="#top">top</a>
</body>

My problem is that this script seems to lock up the browser if there are too many photos. What I wanted to do was have it load say 50 photos and then have another page with another 50. However, I wasn’t sure how to make each start with the 50th item in the json object instead of the first. I was able to make it stop at 50 by having it return false when k == 50. If someone could give me an example of how to do this using each I’d appreciate it. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you have a Javascript array rather than a jQuery object, you use the slice method in the array class instead of the slice method in jQuery:

    $.each(data1.photoset.photo.slice(50, 100), function(k,item){
    • 0