Results 1 to 5 of 5

Thread: virtual pagination - paginate horizontally?

  1. #1
    Join Date
    Sep 2007
    Location
    west sacramento
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question virtual pagination - paginate horizontally?

    1) Script Title: Virtual Pagination

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pagination.htm

    3) Describe problem: i can't figure out how to get the pagination to run horizontally rather than vertically.

    please look at my example: http://www.32-bits.com/paginate

    i've pared down the demo a bit to make it easier to read. as you can see, everything runs from top to bottom. i'd like to get it to run left to right. i found a similar post (http://www.dynamicdrive.com/forums/s...al+pagination), but still couldn't figure it out on my own. any help would be appreciated.

    thanks.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can try using CSS to cause the images to "float:left", in essense, display horizontally. Add the below to the HEAD section of your page:

    Code:
    <style type="text/css">
    
    #gallerypaginate{
    float: left;
    margin-right: 5px;
    }
    
    </style>

  3. #3
    Join Date
    Sep 2007
    Location
    west sacramento
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by ddadmin View Post
    You can try using CSS to cause the images to "float:left", in essense, display horizontally. Add the below to the HEAD section of your page:

    Code:
    <style type="text/css">
    
    #gallerypaginate{
    float: left;
    margin-right: 5px;
    }
    
    </style>
    thanks! i tweaked it a bit, and it works great.

  4. #4
    Join Date
    Nov 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default horizontally and vertically

    Hi,

    I use the virtual pagination script together with php and it works fine. I can show images from a folder on my webserver by looping them through php like so...

    PHP Code:
    <?php        
    $j
    =1;
    foreach( 
    $the_image as $image_name)
    {
    $image $mosConfig_live_site $folder .'/'$image_name;
    $arr_image = array($j => $image);

    echo 
    '              
                        <p class="floating '
    .$j.'">
                            <div class="virtualpage'
    $id .'">
                                <div>'
    .$name[$j].'</div>
                                <div>
                                    <a href='
    .$link[$j].'> <img src="'.$arr_image[$j].'" border="0" width="'.$width.'" height="'.$height.'" alt="'.$name[$j].'" /></a>
                                </div>
                            </div>
                        </p>
                        '
    ;
    $j++;
    }
    ?>
     
    <div align="center" id="paginatediv<?php print $id?>" class="paginationstyle">
        <a href="#" rel="previous" style="margin-right: 5px">Prev</a>
        <span></span>
        <a href="#" rel="next" style="margin-left: 5px">Next</a>
    </div>

    </div>
    <script language="javascript" type="text/javascript" src="modules/mod_imagescroller/paginate.js"></script>    
        
    <script type="text/javascript">
    //virtualpaginate(className, pieces_to_show_per_page)
    var pagecontent=new virtualpaginate("virtualpage<?php print $id?>", 3)
    pagecontent.buildpagination("paginatediv<?php print $id?>")

    </script>
    Now I'm searching a solution on how to show the images in two columns and 3 rows per page. So not just horizontal or just vertical but horizontal and vertical.

    I allready put the images in an array for some control and through css I tried to position each image (<p class="floating '.$j.'">) but nothing works.

    Can someone help me?

  5. #5
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Since you're using PHP to output the images dynamically, an easy way to precisely fine tune how many images gets shown per "page" (ie: 2 rows x 3 cols) is to do that using PHP instead first before outputting to VP script. In other words, you would tweak your PHP to output chunks of images in 2x3 batches, with the HTML as well to format them as desired. If you're not familiar enough with CSS, you may wish to resort to using table cells to do the formatting. Then, each chunk that's output would be put inside a "page" within VP script for pagination.

    Another solution is to use this script instead: http://www.dynamicdrive.com/dynamici...photoalbum.htm. On the backend then, you'd be dynamically outputting the content arrays, such as:

    Code:
    var myvacation=new Array()
    myvacation[0]=["../photo1.jpg", "", "photo1-large.jpg"]
    myvacation[1]=["photo2.jpg", "Our car", ""]
    myvacation[2]=["photo3.jpg", "Our dog", "photo3-large.jpg"]
    myvacation[3]=["photo4.jpg", "Our hotel", "http://www.gohawaii.com/"]
    myvacation[4]=["photo5.jpg", "Our Computer", "http://www.google.com", "_new"]
    myvacation[5]=["photo6.jpg", "Our house", "photo6-large.jpg"]
    myvacation[6]=["photo7.jpg", "Our Friends", "http://www.ask.com"]

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •