Results 1 to 1 of 1

Thread: Virtual Pagination w/ corresponding drop down <select>

  1. #1
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Virtual Pagination w/ corresponding drop down <select>

    1) Script Title:
    Virtual Pagination script v2.0

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pagination.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:

    Code:
    <!-- 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!
    Last edited by kpsony; 10-06-2009 at 07:00 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •