Question

我有一个照片缩略图列表：

<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后，我都会得到越来越多的对话框。

有什么建议吗？

提前致谢。

在JQuery UI对话框中创建链接`next / prev`

0 个答案: