virtual pagination - paginate horizontally?

[radiofriendlybox]

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.

[ddadmin]

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:

<style type="text/css">

#gallerypaginate{
float: left;
margin-right: 5px;
}

</style>

[radiofriendlybox]

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:

<style type="text/css">

#gallerypaginate{
float: left;
margin-right: 5px;
}

</style>

thanks! i tweaked it a bit, and it works great.

[dkoper]

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        
$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?

[ddadmin]

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:

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"]