Open album page jump at top of page

[breagan1]

1) Script Title: Php Photo Album

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

3) Describe problem: When I click on a "jump to page" link, the new thumbnails open up but I am not taken to the top of the page. Normally to open a link at a specific position on the new page you would add this code to the top of the page <a name="top"></a>

and then you would add #top to the end of the jump to page link. I can't seem to get the next thumbnail page to open at the top of its page.
Any thoughts or am I dreaming too much?

[jscheuer1]

Replace:

<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>

with:

<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+');" ' +
'onclick="jumptopage('+i+');window.scrollTo(0, 0);return false;">Page'+i+'</a> ');
document.getElementById("navlink1").className="current";
</script>

This should also take care of the targeting problem which you mentioned before (and that I didn't really understand at that point) without needing to target _self. And it's actually a better way of doing so.

[breagan1]

Nice job John. One question, I had my code set to show page ranges as the links: "460 - 486". How do I reincorporate that into this modified code?

[breagan1]

OK, I got it:

<script type="text/javascript">
var itemsperpage=totalslots
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++){
var start=(i==1)? i : itemsperpage*(i-1)+1
var end=(i==1)? itemsperpage : Math.min(galleryarray.length, start+itemsperpage-1)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+');" ' +
'onclick="jumptopage('+i+');window.scrollTo(0, 0);return false;">'+start+' to '+end+'</a> ')
}
document.getElementById("navlink1").className="current"
</script>

Thanks again.

[breagan1]

One more questions:

Can I modify this code to left align the image when it opens in the frame?
Right now the image appears centered in the frame.

[jscheuer1]

Using Opera? That's the only browser I know of that will automatically center the image in the frame. All others (IE, Google Chrome, Safari, and FireFox) that I tested open it top left aligned.

What's happening is that since you are opening the image itself in the frame (as opposed to a page with the image on it), the browser decides how to orient the image. As I say, all but Opera (as far as I know) will top left align it. Opera users generally are used to this, so I wouldn't worry about it.

However, if you really need to control the presentation of the image in all browsers, change:

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
            var popupsetting=[0, "width=500px, height=400px, scrollbars, resizable"]

to:

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
            var popupsetting=[1, ""]

And change:

	function popuplinkfunc(imgsrc){
            if (popupsetting[0]==1){
            var popwin=open(imgsrc.href, "popwin", popupsetting[1])
            popwin.focus()
            return false
            }
            else
            return true
            }

to:

	function popuplinkfunc(imgsrc){
            if (popupsetting[0]==1){
            var popwin=window.open('', "CENTER")
            popwin.document.write('<img src="' + imgsrc.href + '" alt="">');
            popwin.document.close();
            popwin.focus();
            return false;
            }
            else
            return true;
            };

I've never actually tried this with a frame (new windows only), but it should work, as a frame is also considered as a window.