Pagination with Lightbox

Pagination with Lightbox

Greeting everyone. I am brand new to this all, and I've searched everywhere hoping to find an answer to my issue. I'm hoping someone here can help.

I am currently working on a site where I must display a large number of images (cars). I chose to use the Pagination plugin for purposes of space and simplicity for viewing. No problem there.

However, my goal is to bring up a Lightbox to display more images (details) of a particular image (car) when a user clicks on a single image (car) from one of the pages. Unfortunately, I cannot get the Lightbox to function within the Pagination.

In the sample code/page I've provided, I'm simply trying to get the pagination content in Page 1 to mimic the Lightbox functionality of the images above it.

Thank you in advance to anyone will to take the time to help me. It will be tremendously appreciated.



http://www.like-ness.com/gmoneyreg/help/

Details:
lightbox: balupton edition
pagination: version 1.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="pagination.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
       
            // This is a very simple demo that shows how a range of elements can
            // be paginated.
       
            /**
             * Callback function that displays the content.
             *
             * Gets called every time the user clicks on a pagination link.
             *
             * @param {int}page_index New Page index
             * @param {jQuery} jq the container with the pagination links as a jQuery object
             */
         function pageselectCallback(page_index, jq){
                var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                return false;
            }
           
            /**
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult div.result').length;
                // Create pagination element
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 2,
                    num_display_entries: 8,
                    callback: pageselectCallback,
                    items_per_page:1
                });
             }
                   
            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements       
            $(document).ready(function(){     
                initPagination();
            });   
</script>
</head>

<body>

<div>
<ul>
   <li>
                  <a rel="lightbox-1w" href="images/1/white/1.jpg"><img src="images/1/white/small/1.jpg" alt="" /></a>
                  <a rel="lightbox-1w" href="images/1/white/2.jpg"></a>
                  <a rel="lightbox-1w" href="images/1/white/3.jpg"></a>   
    </li>
    <li>
                  <a rel="lightbox-1r" href="images/1/red/1.jpg"><img src="images/1/red/small/1.jpg" alt="" /></a>
                  <a rel="lightbox-1r" href="images/1/red/2.jpg"></a>
                  <a rel="lightbox-1r" href="images/1/red/3.jpg"></a>
      </li>

</ul>
</div>

<div id="Pagination" class="pagination">
        </div>
      <br style="clear:both;" />
      <div id="Searchresult">
         This content will be replaced when pagination inits.
      </div>
       
        <!-- Container element for all the Elements that are to be paginated -->
        <div id="hiddenresult" style="display:none;">
            <div class="result">

                  <a rel="lightbox-1b" href="images/1/black/1.jpg"><img src="images/1/black/small/1.jpg" alt="" /></a>
                  <a rel="lightbox-1b" href="images/1/black/2.jpg"></a>
                  <a rel="lightbox-1b" href="images/1/black/3.jpg"></a>

         </div>
            <div class="result"><p>Credibly fabricate e-business models for end-to-end niches.
                Compellingly disseminate integrated e-markets without ubiquitous services.
                Credibly create equity invested channels with multidisciplinary human capital.</p>
                <p>
                Interactively integrate competitive users rather than fully tested
                infomediaries. Seamlessly initiate premium functionalities rather than impactful
                architectures. Rapidiously leverage existing resource-leveling processes via
                user-centric portals.</p>
            </div>
            <div class="result"><p>Globally maximize granular
                "outside the box" thinking vis-a-vis quality niches. Proactively formulate 24/7
                results whereas 2.0 catalysts for change. Professionally implement 24/365 niches
                rather than client-focused users.</p>
                <p>
                Competently engineer high-payoff "outside the box" thinking through cross
                functional benefits. Proactively transition intermandated processes through
                open-source niches. Progressively engage maintainable innovation and extensible
                interfaces.</p>
         </div>
        </div>
</div>
</body>
</html>

    • Topic Participants

    • admin