Skip Main Navigation

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Adding VCR controls to iGM

There may be times when you want to add first, previous, next, and last controls to your Imag Gallery Magic application. To do so, you first need to make a small tweak to the JavaScript file. Open the p7gsscripts.js file and locate the P7GSgi function. It should be at approximately line 142. Inside the function, locate the string gi[2]=(i<x)?i+1:x;

Change the last x to zero so your function looks like this:

function P7GSgi(){ //v1.1.0 by
var i,x,a,gi=new Array();x=p7gstmb.length-1;for(i=0;i<p7gstmb.length;i++){
if(p7gstmb[i]==p7gsca){break;}}gi[0]=0;gi[1]=(i>0)?i-1:0;gi[2]=(i<x)?i+1:0;gi[3]=x;gi[4]=i;return gi;

Save and close the script file (and remember to upload it to your server when finished).

Add VCR links

Add 4 links to your page. They could be text links that simply state:

First | Previous | Next | Last

You can also use images.

The link HREF attribute should be set to a hash (#). The code would look like this:

<a href="#">First</a>

Now assign special onClick behaviors to each link's <a> tag to navigate the images:

First Image:
P7_HGStrig(P7GSgi()[0]);return false;

Previous Image:
P7_HGStrig(P7GSgi()[1]);return false;

Next Image:
P7_HGStrig(P7GSgi()[2]);return false;

Last Image:
P7_HGStrig(P7GSgi()[3]);return false;

Your final code would look like this:

<a href="#" onClick="P7_HGStrig(P7GSgi()[0]);return false;">First</a>
<a href="#" onClick="P7_HGStrig(P7GSgi()[1]);return false;">Previous</a>
<a href="#" onClick="P7_HGStrig(P7GSgi()[2]);return false;">Next</a>
<a href="#" onClick="P7_HGStrig(P7GSgi()[3]);return false;">Last</a>

That's all there is to it.

See a sample page using this technique