PDA

View Full Version : Virtual Pagination w/ corresponding drop down <select>



kpsony
10-06-2009, 06:54 PM
1) Script Title:
Virtual Pagination script v2.0

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

3) Describe problem:
I have a portfolio page that I want to have two navigations - one drop down menu that has the examples title, then normal pagination links. The problem I am running into is that I cant get the pagination links to update when the drop down menu does. For example say I have an option in the drop down menu that is 3) Website Example, and then on the other side 3 links, Website Example being the 3rd. When I click on the 3rd option in the drop down, I want it to change the image, but also unbold the #3 on the text links. Make sense? Is this possible?

This is what I have so far that will populate both, but it wont update the links with the drop down:


<!-- Additional Pagination DIV for Demo 1 (should be an empty DIV)-->
<!-- Pagination DIV for Demo 5 -->
<div id="galleryselect2" class="paginationstyle"></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>

<div style="width: 300px;">

<div class="virtualpage virtualpage5 hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>

<div class="virtualpage virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>

<div class="virtualpage virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>

<div class="virtualpage virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>

</div>

<!-- Pagination DIV for Demo 1 -->
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>

<!-- Initialize Demo 1 -->
<script type="text/javascript">

var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: true //Remember last viewed page and recall it when user returns within a browser session?
})

gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])

</script>

<!-- Initialize Demo 5 -->
<script type="text/javascript">

var gallery5=new virtualpaginate({
piececlass: "virtualpage5",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
persist: true
})

gallery5.buildpagination(["galleryselect"], ["castle", "park", "harvest", "country"])

</script>

Anything help would be amazing!

Thank you!