создание ссылок `next / prev` внутри диалога JQuery UI - PullRequest
Новая
       6

создание ссылок `next / prev` внутри диалога JQuery UI

2 голосов
/ 25 мая 2011

У меня есть список фотографий большого пальца: 

<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>

после нажатия на большой палец я получаю диалоговое окно JQuery UI: 

$(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'); }
          },

        }); 
    });

 });

загружается успешно со всеми необходимыми мне данными.

Так что теперь я хочу иметь next/prev ссылки внутри загруженного диалога. Диалог должен быть закрыт и перезагружен новым контентом после нажатия next. Или, может быть, не закрыт, просто перезагрузил ... вот где я застрял.

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'); }
          }); 
      });

 });

Я пробовал таким образом, но после каждого нажатия на next я получаю все больше и больше открытых диалогов.

Есть предложения?

Заранее спасибо.

...