Open up first Fancybox picture automatically

Question

Upon clicking on a link, I am bringing in some images from a JSON get, and then when clicking on one of the pictures can get the gallery to appear, but I would like the first image to appear straight away, as an event once the JSON has been loaded. Is this possible?

My code is:

$("#json-get")
    .css("cursor","pointer")
    .click(function(){
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
            function(data){
                $.each(data.items, function(i,item){
                    $("<a/>").attr("rel", "group").addClass("json-im").appendTo("#imgs").attr("href", item.media.m).append(
                    $("<img/>")
                        .attr("src", item.media.m)
                    );
                });
                $("#imgs a").fancybox();
                // Load the first element
            });
});

Many Thanks!

Answer 1

Try adding:

  $("#imgs a:first").trigger('click');

after you create the fancybox.