PDA

View Full Version : Virtual Pagination using image buttons?



jkr
02-19-2008, 11:24 PM
1) Script Title: Virtual Pagination script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm

3) Describe problem:
Hello, just came across this wonderful script to truncate large bodies of text. I was wondering if it's possible to get some help with this question?
In either Demo1 or Demo4 of the step 2 code is it possible to replace either the numbers or customised text with an image button instead?

I tried a search and didn't have any luck with finding a similar question. :( Your help much appreciated in this...

thetestingsite
02-19-2008, 11:40 PM
Use the following in the body of your document as an example, simply change the optional text to be image names like so:



<!--###### 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:




//CUSTOMIZATION
var imgdir = '/images/'; //path to images directory (notice the trailing slash)

/******** NO NEED TO EDIT BELOW ************/


Hope this helps.

jkr
02-20-2008, 12:16 AM
Thank you so very very much :)

Worked out fantastic!!!

The image buttons worked and correlated with the data field. YAY!