PDA

View Full Version : Pagination on Photo Album script, please



eroychiu
11-21-2008, 08:38 AM
Photo Album script v2.0
http://www.dynamicdrive.com/dynamicindex4/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
11-21-2008, 12:10 PM
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
11-21-2008, 04:12 PM
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
11-21-2008, 04:38 PM
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';
}
}