Call shadowbox inside gallery.js

Question

I have an image gallery and I want to add a shadowbox when I click on the large image. The shadowbox is working on the HTML page, but when I try to call it trough the gallery, it doesn't answer!

This .js script is called to be able to show the large image in the image gallery.

// shows the large image that is associated to the $item

var $loader  = $rgGallery.find('div.rg-loading').show();

$items.removeClass('selected');
$item.addClass('selected');

var $thumb    = $item.find('img'),
largesrc  = $thumb.data('large'),
title    = $thumb.data('description');

$('<img/>').load( function() {
  $rgGallery.find('div.rg-image').empty().append('<a href="' + largesrc + '" rel="shadowbox" ><img src="' + largesrc + '"/></a>');
  if( title )
    $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
  $loader.hide();
})

What should I do?