Now I've used the virtualpaginate.js script on our products page which will show multiple products on the same page via <DIV> tags. I setup the script and its working perfectly fine and looks good on the page too. Now that the script is up and running, I want to change a few things around to make it easy for the user to find information on the products they are interested in.
I planning on adding direct links to the virtual page above the information tab so users can directly jump to their product of choice and link it from another page also. Anyway, that is a different case, My dilemma comes in when I want to have custom names in the
Currently, the drop down menu show's "Page 1 of XX" as a default, I checked the documentation and there is a way of changing that and adding my own custom names which would by synced so the drop down menu changes if the user clicks on the Next or Previous arrows. As a function of the script, the names in the drop down change and the menu can be used to jump to a page directly also.
I hope I've explained everything enough for you guys to understand what I'm trying to achieve here. I read the virtualpaginate.js documentation and there is a way of adding custom lists in the drop down menu but the problem is I don't understand how to use it. Since I'm not a professional developer, I have limited knowledge of JS etc. The documentation gives the following example
By default if your Pagination DIV contains the "flatview" SPAN element, or the SELECT menu element, the script will dynamically create sequential numbers ("1", "2", "3") inside that SPAN as pagination links:
ORCode:<div id="paginatediv" class="paginationstyle"> <a href="#" rel="previous" style="margin-right: 100px">Prev</a> <span class="flatview"></span><a href="#" rel="next">Next</a> </div>
To specify your own custom text in place of those numbers, when calling pagecontent.buildpagination() above, pass in an array of your own custom text for its optional 2nd parameter:Code:<div id="paginatediv" class="paginationstyle"> <a href="#" rel="previous" style="margin-right: 100px">Prev</a> <select><//select><a href="#" rel="next">Next</a> </div>
Here's the link to the page I have the script running on: http://demo.t3-interactive.com/bld/products.htmlCode:pagecontent.buildpagination(["paginatediv"], ["horses", "cows", "rabbits", "donkeys"])
I would REALLY appreciate help with this as my boss will be asking me the progress in a few days and I really want to give him something workable.