Results 1 to 7 of 7

Thread: Virtual Pagination script

  1. #1
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Virtual Pagination script

    1) Script Title: Virtual Pagination script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pagination.htm

    3) Describe problem:

    hi all. Ok, have tried searching but nothing like my question.

    Firstly great script. Not sure if the way i'm using it is what it was intended for but it works. I was wondering if it is possible for one thing more to happen (although I've already resigned myself to it possibly being a bit too much given the scripts initial purpose.


    Ok, here is the script in use on my site:
    http:http://www.satorimedia.co.uk/sample.htm

    As you can see, clicking on an image takes the user to a new page which hosts the corresponding video. What I would like (if possible, or anyone can be bothered to work out), is for the script to show the thumbnail of the page the user is on and moving previous or next begins from that point.

    At the moment it (obviously) defaults to the first option in the list.

    Can anyone help with this?

    Many thanks

    Jules
    Last edited by ddadmin; 01-20-2008 at 03:22 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I think basically you're asking if it's possible to get the script to show by default a specific page, instead of the 1st one as it does now. Certainly, you can do this by calling the showpage(pagenumber) function at the end of your initialization code. So for example:

    Code:
    <!-- Initialize Demo 2 -->
    <script type="text/javascript">
    var newscripts=new virtualpaginate("virtualpage2", 1, "p") //Let script know you're using "p" tags as separator (instead of default "div")
    newscripts.buildpagination("scriptspaginate")
    newscripts.showpage(2) //show 3rd page by default
    </script>
    The 2 here means 3rd page (0=1st page which is the default). Call this function on each of your different pages, wth a different page number. Docs here.

  3. #3
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for that,

    useful but not quite there. I would like the part number to change with the part selected. So where you suggested (2) which is page 3, I would like the (x) number to be variable, and to correspond with the selected page.

    So if we chose page 3, the number would be (3) or even (4) as in one ahead, but related to the selected page by some code stipulation.

    Therefore if we chose page 7, the number would be (7) or even (8) as in one ahead.

    This sort of thing. Can the number (2) be variable?

    Thank you though, nice trick in itself

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    It's possible as well. A common technique is to use the URL of the browser to pass the page number variable (ie: 3 or 4), so the script on that webpage can pick up on it and display the desired Virtual Page.

    Take a look at this thread, which shows you the technique. It can be adapted basically as is in this case as well.

  5. #5
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks ddadmin, but if you can be bothered i may need a little more. I looked at the suggested thread and tried to use the code and alter it as relevant, but i must have done something wrong as i'm using naive logic rather than learned knowledge. I have added this to the paginate.js script:

    function externalselectlisten(tabcontentvar){
    var re=new RegExp(tabcontentvar+"=(\\d+)", "i") //match tabcontentvar=xxx (xxx=integer)
    var urlparam=window.location.href.match(re)
    var paramvalue=RegExp.$1
    if (/\d+/i.test(paramvalue)) //if URL parameter contains "?tabcontentvar=xxx"
    return parseInt(paramvalue) //return xxx part
    else
    return -1
    }




    I then added what you put in red to the bottom of my original initiate code and change countries to gallery as per the code in the script i'm using, so the code in each page looks like this:


    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/sample.htm"><img src="http://www.satorimedia.co.uk/thumbs/cea.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/samplepolitics.htm"><img src="http://www.satorimedia.co.uk/thumbs/politics.gif" /></a> </div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/sampletransition.htm"><img src="http://www.satorimedia.co.uk/thumbs/transition.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/samplekart.htm?gallery=4"><img src="http://www.satorimedia.co.uk/thumbs/kart.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/sampleparent.htm"><img src="http://www.satorimedia.co.uk/thumbs/parent.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/sampletiny.htm"><img src="http://www.satorimedia.co.uk/thumbs/tinyb.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/samplesrb6.htm"><img src="http://www.satorimedia.co.uk/thumbs/srb6.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/samplesafe.htm"><img src="http://www.satorimedia.co.uk/thumbs/safe.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/sampleknife.htm"><img src="http://www.youth-tv.co.uk/pics/knife.gif" /></a></div>

    <div class="virtualpage5"><a href="http://www.satorimedia.co.uk/sample.htm"><img src="http://www.satorimedia.co.uk/thumbs/coming.gif" /></a></div>


    <!-- Pagination DIV for Demo 5 -->
    <div id="galleryselect" class="paginationstyle">
    <a href="#" rel="previous">Prev</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" rel="next">Next</a><br /><br />
    <!-- <select style="width: 150px"></select>--></div>


    <!-- Initialize Demo 5 -->
    <script type="text/javascript">
    var gallery=new virtualpaginate("virtualpage5", 1)
    gallery.buildpagination("galleryselect", ["Healthy School Programme (Islington)", "People & Politics: Youth Focus", "Learning Disabilities (Islington)", "City Karting Project'06", "YOT: Parent Support Support", "Youth Music Video", "SRB 6 Regeneration on Woodberry Down Estate", "Safeguarding Children Board (Islington)", "Youth TV: Episode 8 (Knife & Gun Crime)", "Coming Soon"])


    var externalselectindex=externalselectlisten("gallery")
    if (externalselectindex!=-1)
    gallery.expandit(externalselectindex)

    </script>


    I added ?gallery=4 to one of the div urls is references as a test, and checked that page but no joy. I know i'm missing something simple or have done something obviously wrong, but i just don't know what.

    Am i close to getting it right, or shall i give up and live with it ?

    Thanks

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Yep, you're literally plugging in the code referenced in the other thread to this one, which wouldn't work. For example, you wouldn't be calling gallery.expandit(externalselectindex) as you did above, which is for Tab Content script.

    Starting from scratch, here's what you would do:

    1) Insert the below function to the very end of virtualpaginate.js:

    Code:
    function externalselectlisten(tabcontentvar){
    var re=new RegExp(tabcontentvar+"=(\\d+)", "i") //match tabcontentvar=xxx (xxx=integer)
    var urlparam=window.location.href.match(re)
    var paramvalue=RegExp.$1
    if (/\d+/i.test(paramvalue)) //if URL parameter contains "?tabcontentvar=xxx"
    return parseInt(paramvalue) //return xxx part
    else
    return -1
    }
    2) Then, at the end of your initialization code within your HTML page, add the part in red to it. For example:

    Code:
    <!-- Initialize Demo 2 -->
    <script type="text/javascript">
    var newscripts=new virtualpaginate("virtualpage2", 1, "p") //Let script know you're using "p" tags as separator (instead of default "div")
    newscripts.buildpagination("scriptspaginate")
    var externalselectindex=externalselectlisten("vp")
    if (externalselectindex!=-1)
    newscripts.showpage(externalselectindex) //show page per url parameter (?vp=externalselectindex)
    </script>
    Now this particular virtual pagination instance will respond to something like:

    Code:
    http://www.satorimedia.co.uk/samplekart.htm?vp=2
    Where loading the URL with "vp=2" causes the 3rd slide to be shown by default. 0=1st slide etc.
    Last edited by ddadmin; 01-20-2008 at 03:38 PM.

  7. #7
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sir, you are a star.

    i do very much appreciate your time, especially as i'm not even a regular user or contributer to the forum.

    it all works. for some reason when you first go to the /sample.co.uk page it doesn't work, but that really isn't a bother at all as it is the first in the list anyway, but if you go back to that page later it does anyway. i'm truly not fussed about that.

    for a while i've wanted something simple and small to enable suers to browse through the video list, and considering my knowledge is only html and css i am limited with what i can use, but thanks to this site, i have what i want.

    many thanks.

    jules

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
  •