Virtual Pagination script

[jules213]

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

[ddadmin]

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:

<!-- 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.

[jules213]

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

[ddadmin]

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.

[jules213]

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

[ddadmin]

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:

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:

<!-- 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:

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.

[jules213]

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