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>

Reply via email to