Use the following in the body of your document as an example, simply change the optional text to be image names like so:
Code:
<!--###### Virtual Pagination Demo 5 ######### -->
<h3>Demo 5 (shows "SELECT" pagination interface with custom text defined):</h3>
<div style="width: 300px; height: 230px;">
<div class="virtualpage5">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage5">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage5">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage5">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>
<!-- Pagination DIV for Demo 5 -->
<div id="galleryselect" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <select style="width: 120px"></select> <a href="#" rel="next">Next</a>
</div>
<!-- Initialize Demo 5 -->
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage5", 1)
gallery.buildpagination("galleryselect", ["castle.jpg", "park.jpg", "harvest.jpg", "country.jpg"])
</script>
Then use the attached virtualpaginate.js file (change the following in the file to point to your images directory:
Code:
//CUSTOMIZATION
var imgdir = '/images/'; //path to images directory (notice the trailing slash)
/******** NO NEED TO EDIT BELOW ************/
Hope this helps.
Bookmarks