Pagination on Photo Album script, please

[eroychiu]

Photo Album script v2.0
http://www.dynamicdrive.com/dynamici...photoalbum.htm


3) Describe problem:

Hello everyone,

For the browsing gallery paging method, it shows all the pages number under the browsing gallery. It is causing me problem since my gallery have more than 30 pages, and it looks ugly on the template.

Example: Browsing Gallery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Does anyone know how to short it up so that it will only display the next 5 pages and the last page.
Besides, I do not really know where to put the "..." within the javascript...please help =(

Change to : Browsing Gallery [<<prev page] 1...2 3 4 5 6...20 [next page >>]

[jscheuer1]

OK, in the photogallery.js file, replace the photogallery.prototype.createNav function with this one:

photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
	var instanceOfGallery=this
	var navHTML=""
	for (var i=0; i<this.pagecount; i++)
		navHTML+=(ptext[2]&&i==this.pagecount-1? ptext[2]+' ' : '')+'<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a><span> </span>'+(ptext[2]&&i==0? ptext[2]+' ' : '') //build sequential nav links
	pdiv.innerHTML=ptext[0]+' '+navHTML
	var navlinks=pdiv.getElementsByTagName("a")
	navlinks[0].className="current" //Select first link by default
	this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
	for (var i=0; i<navlinks.length; i++){
		navlinks[i].onclick=function(){
			instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
			this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
			instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
			instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
			if(ptext[2]){
			var n = this.rel-0, above = Math.min(2, navlinks.length-2-n), below = Math.min(n-1, 2),
			range=above==below? [n-2, n+2] : above<below? [navlinks.length-6, navlinks.length] : [n-below, n+2+(2-below)];
			for (var i = navlinks.length - 1; i > -1; --i)
				navlinks[i].style.display = navlinks[i].nextSibling.style.display = i==0||i==navlinks.length-1||(i>=range[0]&&i<=range[1])? '' : 'none';
			}
			return false
		}
		if(ptext[2])
			navlinks[i].style.display = navlinks[i].nextSibling.style.display = i<6||i==navlinks.length-1? '' : 'none';
	}
}

Then in your configuration script, use something like:

var thepics=new photogallery(myvacation, 3, 1, '700px', '600px', ['Browsing Gallery', '', '. . .'])

The highlighted text will be the separator:

1 . . . 31 32 33 34 35 . . . 44

[eroychiu]

Hello, thank you for your answering.

Could you please help me on this...

At the start, it shows

1...2 3...44

will it be possible to make it more logical by


in the beginning,

1 2 3 4 5...44

and

at the end

1...50 51 52 53 54

[jscheuer1]

photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
	var instanceOfGallery=this
	var navHTML=""
	for (var i=0; i<this.pagecount; i++)
		navHTML+=(ptext[2]&&i==this.pagecount-1? '<span id="endsep'+this.gcount+'">'+ptext[2]+'</span>'+' ' : '')+'<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a><span> </span>'+(ptext[2]&&i==0? '<span style="display:none;" id="beginsep'+this.gcount+'">'+ptext[2]+'</span>'+' ' : '') //build sequential nav links
	pdiv.innerHTML=ptext[0]+' '+navHTML
	var navlinks=pdiv.getElementsByTagName("a")
	navlinks[0].className="current" //Select first link by default
	this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
	for (var i=0; i<navlinks.length; i++){
		navlinks[i].onclick=function(){
			instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
			this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
			instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
			instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
			if(ptext[2]){
			var n = this.rel-0, above = Math.min(2, navlinks.length-2-n), below = Math.min(n-1, 2),
			range=above==below? [n-2, n+2] : above<below? [navlinks.length-6, navlinks.length] : [n-below, n+2+(2-below)];
			for (var i = navlinks.length - 1; i > -1; --i)
				navlinks[i].style.display = navlinks[i].nextSibling.style.display = i==0||i==navlinks.length-1||(i>=range[0]&&i<=range[1])? '' : 'none';
			document.getElementById('beginsep'+instanceOfGallery.gcount).style.display = n<4? 'none' : '';
			document.getElementById('endsep'+instanceOfGallery.gcount).style.display = n>navlinks.length-5? 'none' : '';
			}
			return false
		}
		if(ptext[2])
			navlinks[i].style.display = navlinks[i].nextSibling.style.display = i<6||i==navlinks.length-1? '' : 'none';
	}
}