I'm trying to use the pagination plugin with DOMWindow, but they're not playing well together. I think it's probably just my lack of knowledge with jQuery, so I thought I post for help.
The DOMWindow stops working after I use any of the pagination links. If I use DOMWindow as soon as the page loads, it's fine. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pagination.js"></script> <script type="text/javascript" src="js/jquery.DOMWindow.js"></script> <script type="text/javascript"> //<![CDATA[ function pageselectCallback(page_index, jq){ var new_content = $('#pages div.page:eq('+page_index+')').clone(); $('#pages_container').empty().append(new_content); return false; } function initPagination() { var num_entries = $('#pages div.page').length; // Create pagination element $("#pagination").pagination(num_entries, { num_edge_entries: 2, num_display_entries: 8, callback: pageselectCallback, items_per_page:1 }); } $(document).ready(function(){ initPagination(); $('.fixedAjaxDOMWindow').openDOMWindow({ borderColor:'#999', borderSize:'2', overlay:1, overlayColor:'#000', overlayOpacity:'60', height:360, width:549, eventType:'click', loader:1, loaderImagePath:'images/ajax-loader.gif', loaderHeight:16, loaderWidth:17, windowSource:'ajax', windowHTTPType:'get' }); }); //]]> </script> <div id="pagination" class="pagination"></div> <div id="pages_container"></div> <div id="pages" style="display:none;"> <div class="page"> <div class="thumb"> <a href="detail.php?id=1" class="fixedAjaxDOMWindow"><img src="1.jpg" /></a> <p>1</p> </div> </div> <div class="page"> <div class="thumb"> <a href="detail.php?id=2" class="fixedAjaxDOMWindow"><img src="2.jpg" /></a> <p>2</p> </div> </div> <div class="page"> <div class="thumb"> <a href="detail.php?id=3" class="fixedAjaxDOMWindow"><img src="3.jpg" /></a> <p>3</p> </div> </div> </div>