如何在jquery模式窗口中移动next和previous？

Question

我必须在模式窗口上单击按钮移动图像（上一页和下一页）。有人可以建议我怎么做到这一点？

我有从附件中挑选的图像列表，我想从对话框窗口中滚动它们

<apex:page standardController="Movie__c" extensions="ImageWrapperExtension">
<apex:includeScript value="{!URLFOR($Resource.jQueryForPopup, 'jQuery/jquery-1.8.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryForPopup, 'jQuery/ui/jquery-ui-1.9.1.custom.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryForPopup, 'jQuery/postmessage/jquery.ba-postmessage.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryForPopup, 'jQuery/bbq/jquery.ba-bbq.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQueryForPopup, 'jQuery/ui/css/ui-lightness/jquery-ui-1.9.1.custom.min.css')}"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<script type="text/javascript">

        var do1 = function(){}    
        jQuery = $.noConflict(true);
        jQuery(document).ready(function($){

           do1 = function(url){      
            if(event.preventDefault) 
            {
              event.preventDefault();
            }
            else
            {
               event.returnValue = false;
            }          

            var iframe_url = url;
            var child_domain = iframe_url.substring(0, iframe_url.indexOf('/', 9)); 
            var parent_domain = window.location.protocol + '//' + window.location.host; 
            var j$modalDialog = jQuery('<div id="opppopup"></div>') 
            .html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="10" marginwidth="10" scrolling="yes" />') 
            .dialog({ 
                autoOpen: false, 
                title: 'Image Preview', 
                resizable: true, 
                width: 600, 
                height: 390, 
                autoResize: true, 
                modal: true, 
                draggable: false
            }); 

                j$modalDialog.dialog('open');
                j$modalDialog.dialog({
                          buttons: {
                                'Next': function() {
                                   //do something
                                   $(this).dialog('close');
                                },
                                'Previous': function() {
                                   $(this).dialog('close');
                                }
                              }
                });

           }
       });    


</script>    

<br/>
<br/>
<br/>
<br/>


<table>
<tr>
    <apex:repeat value="{!myCollection}" var="photo"  >
    <td>
         <apex:image url="{!URLFOR($Action.Attachment.Download, photo.photoId)}" width="200px" height="200px"  onclick="do1('{!URLFOR($Action.Attachment.Download, photo.photoId)}');"/> <br/>
         <apex:outputText value="{!photo.name}"/> 
    </td>
    </apex:repeat>
</tr>
</table>


</apex:page>

控制器：

 public with sharing class ImageWrapperExtension {

    private ApexPages.standardController controller;
    private integer totalRecs = 0;       
    private Movie__c movie;
    List<DataTableWrapper> myCollection ;

    public ImageWrapperExtension (ApexPages.StandardController controller) {
    Apexpages.currentPage().getHeaders().put('X-UA-Compatible', 'IE=edge');
        this.controller = controller;
        this.movie = (Movie__c)controller.getRecord();
        this.myCollection = new List<DataTableWrapper> ();
    }

    public Integer totalPhotos {
       get {
            return myCollection.size();
        }
    }

    public List<DataTableWrapper> getMyCollection () {

       Integer counter = 0;
       for (Attachment att : [select Id, name  from Attachment where ParentId = :movie.Id]) {
        counter = counter + 1;
        // add the wrapper to the collection
        myCollection.add(new DataTableWrapper(att.Id, att.name,counter));
        totalrecs = counter;
      }

      return myCollection;
   }

       // inner class
        class DataTableWrapper {

          public Id photoId{ get; set; }
          public String name{ get; set;}
          public Integer count{ get; set;}

          public DataTableWrapper(Id photoId, String name, Integer count) {
            this.photoId = photoId;
            this.name = name;
            this.count = count; 
          }

        }

}