title: creating links `next/prev` inside JQuery UI dialog
body: <p>I have a photo thumb list:</p>
  
  <pre><code>&lt;div&gt;
   &lt;a href="#" class="open-dialog" id="17"&gt;&lt;img src=/upl/thumb_100_100_2144473683ec519.jpg /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;a href="#" class="open-dialog" id="18"&gt;&lt;img src=/upl/thumb_100_100_23688dddd187dc7.jpg /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;a href="#" class="open-dialog" id="19"&gt;&lt;img src=/upl/thumb_100_100_684889213b56545.jpg /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id='photo-content'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>after clicking on thumb I get JQuery UI dialog:</p>
  
  <pre><code>$(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'); }
            },
  
          }); 
      });
  
   });
  </code></pre>
  
  <p>it loads successfully with all data I need.</p>
  
  <p>So now I want to have <code>next/prev</code> links inside loaded dialog. Dialog should be closed and reloaded with new content after clicking <code>next</code>. Or maybee not closed, just reloaded...this is where I'm stuck.</p>
  
  <p>html:</p>
  
  <pre><code>...
  &lt;a href="#" class="next"&gt;NEXT&lt;/a&gt;
  ...
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(document).ready(function(){
  
     $('.next').live('click', function() {
     $('#photo-content').dialog('close');
     var next_id = &lt;?=$next_photo?&gt;;
  
       $("#photo-content").load('/photo/' + next_id).dialog({
  
            width: '700px',
            resizable: false,
            modal: true,
            buttons: {
                'Close': function() { $(this).dialog('close'); }
            }); 
        });
  
   });
  </code></pre>
  
  <p>I've tried this way, but after every click on <code>next</code> I get more and more opened dialogs.</p>
  
  <p>Any suggestions? </p>
  
  <p>Thanks in advance.</p>