creating links `next/prev` inside JQuery UI dialog

I have a photo thumb list:

<div>
 <a href="#" class="open-dialog" id="17"><img src=/upl/thumb_100_100_2144473683ec519.jpg /></a>
</div>

<div>
 <a href="#" class="open-dialog" id="18"><img src=/upl/thumb_100_100_23688dddd187dc7.jpg /></a>
</div>

<div>
 <a href="#" class="open-dialog" id="19"><img src=/upl/thumb_100_100_684889213b56545.jpg /></a>
</div>

<div id='photo-content'></div>

after clicking on thumb I get JQuery UI dialog:

$(document).ready(function(){

   $('.open-dialog').live('click', function() {

      var id = $(this).attr('id');

        $("#photo-content").load('/photo/' + id).dialog({ //loads php file with full size photo and other content

          width: '700px',
          resizable: false,
          modal: true,
          buttons: {
              'Close': function() { $(this).dialog('close'); }
          },

        }); 
    });

 });

it loads successfully with all data I need.

So now I want to have next/prev links inside loaded dialog. Dialog should be closed and reloaded with new content after clicking next. Or maybee not closed, just reloaded...this is where I'm开发者_如何学Go stuck.

html:

...
<a href="#" class="next">NEXT</a>
...

javascript:

$(document).ready(function(){

   $('.next').live('click', function() {
   $('#photo-content').dialog('close');
   var next_id = <?=$next_photo?>;

     $("#photo-content").load('/photo/' + next_id).dialog({

          width: '700px',
          resizable: false,
          modal: true,
          buttons: {
              'Close': function() { $(this).dialog('close'); }
          }); 
      });

 });

I've tried this way, but after every click on next I get more and more opened dialogs.

Any suggestions?

Thanks in advance.