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.