Flickr API and create lightbox

I am working with the Flickr API. I would like to be able to obtain the object information of the current clicked image that is shown in my lightbox. I am trying to store this information in my indexOfImage variable. I'd like to be able to access the current clicked images items.title and media.m. Does anyone have an idea of what I'm missing?

   $(document).ready(function() {

  $('#search-button').click(function() {
   var flickrApi =      "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
   var search = $('#search').val();
   var flickrOptions = {
    tags: search,
    format: "json"
    };

function displayPhotos(data) {
  var photoHTML = '<ul class = "image-li-container">';
  var results = data;
  var indexOfImage

  $.each(data.items, function(i, photo) {
    photoHTML += '<li class="photo-li lightbox-trigger">';
    photoHTML += '<a href="' + photo.link + '" class="image">';
    photoHTML += '<img class="flickrImage" src="' + photo.media.m + '"></a></li>';

    //**************INSERT HTML*******************//
    $('#image-container').html(photoHTML);

    //**************PREVENT DEFAULT*******************//
    $('li').on('click', '.image', function(e) {
      e.preventDefault();
    });

    //**************OPEN LIGHTBOX AND ADD IMAGE DETAILS*******************//

    $('a').on('click', '.flickrImage', function() {

      var indexOfImage = results.items[i];
      console.log(indexOfImage);
      var newSRC = $(this).attr('src');
      var currentlightboxImage = $(".lightbox-image").attr('src', newSRC);
      $('#lightbox').show();





    }); //END 'A' CLICK

  }); //END LOOP

  } //END DISPLAY PHOTOS

//**************JSON REQUEST*******************//
$.getJSON(flickrApi, flickrOptions, displayPhotos);

 }); //END SEARCH BUTTON CLICK

   //**************ClOSE LIGHTBOX*******************//

  $('#lightbox p').click(function() {
   $('#lightbox').hide();
 });



  }); //DOCUMENT.READY END