Results 1 to 3 of 3

Thread: Virtual Pagination using image buttons?

  1. #1
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Virtual Pagination using image buttons?

    1) Script Title: Virtual Pagination script

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

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. The Following User Says Thank You to thetestingsite For This Useful Post:

    jkr (02-20-2008)

  4. #3
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Thank you!!

    Thank you so very very much

    Worked out fantastic!!!

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

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
  •