Mod - autoshift display image page according to context (i.e. skip headers) Mod - autoshift display image page according to context (i.e. skip headers)
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Mod - autoshift display image page according to context (i.e. skip headers)

Started by kaptainkory, August 10, 2005, 04:55:19 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

kaptainkory

August 10, 2005, 04:55:19 AM Last Edit: May 05, 2006, 04:57:14 PM by GauGau
What it does?

PART 1: When the display image page loads, it "jumps" to the actual image area (skipping the headers).  Focus is also shifted to the page, which is useful when pulling up pictures from locations outside of CPG (such as when using CPMFETCH).

PART 2: When the file information icon is clicked, it "jumps" to the file information area (provided it's visible).


Compatibility?

CPG: Tested on the very latest CVS 1.4 beta, but should work on 1.3 as well (I think).
CPG THEME: Tested on "classic" theme, but should work in others as well.
Browser: Tested in Firefox 1.0 and IE 6.0, but should work from IE 5+ (and hopefully degrade well).


Requirements?

Javascript in Browser must be enabled.


Difficulty of installation?

Pretty easy, I think.  Just a couple of lines of code in 2 files.


Known issues?

None.  (Previous reported issue has been corrected.)


PART 1 INSTALLATION:

Browse to your favorite CPG theme folder.  In template.html, find the text {GALLERY}, and REPLACE WITH:
Code Select
<a name="nav_pic" id="nav_pic"></a>
{GALLERY}
<script language="javascript" type="text/javascript">
this.focus();
if (window.location.search.indexOf('pos=') != -1) {
window.location.href = '#nav_pic';
}
</script>



PART 2 INSTALLATION:

In include/themes.inc.php, FIND (around line 639):
Code Select
                        <a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>

REPLACE WITH:
Code Select
                        <a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); if (document.getElementById('picinfo') && document.getElementById('picinfo') != 'none') { window.location.href = '#nav_picinfo'; } return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>

FIND (around line 1955):
Code Select
    echo "<div id=\"picinfo\" style=\"display: $picinfo;\">\n";

REPLACE WITH:
Code Select
    echo "<a name=\"nav_picinfo\" id=\"nav_picinfo\"></a><div id=\"picinfo\" style=\"display: $picinfo;\">\n";


Preview?

http://www.snakesofarkansas.com/galleries/


Your feedback is welcome.  Thanks.

Rodinou

#1
August 10, 2005, 01:16:31 PM
url preview ?

snork13

#2
August 10, 2005, 04:19:07 PM Last Edit: August 10, 2005, 04:28:02 PM by snork13
Nice mod ;D

i have encounter a few errors, the first being the

Code Select
<body onLoad="this.focus(); if(window.location.href.split('?')[1].indexOf('pos=') != -1) {window.location.href = 'nav_pic';}">

it should be

Code Select
<body onLoad="this.focus(); if(window.location.href.split('?')[1].indexOf('pos=') != -1) {window.location.href = '#nav_pic';}">

you need the "#" in front of the nav_pic to call the ID



@Rodinou

test account for seeing in action

test/test

http://www.snork13.net/gallery

-snork

kaptainkory

#3
August 10, 2005, 05:49:23 PM
Thanks for catching that typo.  (For reasons I won't explain, I had to retype the code rather than the preferred copy-n-paste.)

I've modified the original post with some changes.  These actually simply the code and improves functioning.  Now, the page doesn't have to completely load before the page "jumps" to the image.

Thanks for testing.

Rodinou

#4
August 10, 2005, 06:31:23 PM
I think I'm dumb : I see nothing. On the both sites.

snork13

#5
August 10, 2005, 06:37:43 PM
Quote from: Rodinou on August 10, 2005, 06:31:23 PM
I think I'm dumb : I see nothing. On the both sites.

@Rodinou

you need to get into the album to the normal photo view, it jump the image to the middle...you'll see when you use the prevs or next image navagation..

;D
-snork

snork13

#6
August 11, 2005, 01:01:57 AM
oh,, i also like the javascript in the </head> of the doc

so...

Code Select
<script type="text/javascript" src="scripts.js"></script>
<script language="javascript" type="text/javascript">
this.focus();
if (window.location.search.indexOf('pos=') != -1) {
window.location.href = '#nav_pic';
} </script>

-snork

kaptainkory

#7
August 11, 2005, 01:13:14 AM
The preference would be to put the script in the <head> tag, only it doesn't work in this case.  Notice that the element <a name="nav_pic" id="nav_pic"> has to be RENDERED by the browser BEFORE the script is called.  If the script is in the <head> section it is called too early.

Originally, I had the script in a function in the <head> tag and called it with <body onload="nav_pic();">.  This works fine EXCEPT the jump doesn't occur until after the entire image loads...so there is a definite lag with larger images loading.

Thanks.

snork13

#8
August 11, 2005, 01:43:48 AM
i hear ya, maybe it the fade-in mod, but it seams to load correctly for me and i left it in the head...regardless..it the coolest thing that takes minor change. thanks again :D

-snork

Gephri

#9
January 07, 2007, 12:30:40 PM
Would anyone be able to tell me how to mod this mod so that it will work with slideshow?
Thanks

sharon1

#10
July 22, 2007, 11:49:41 AM
Thanks for the great mod, kaptainkory.  It works great!

Sharon

hassan784

#11
September 28, 2007, 12:26:49 AM
How can I use  this link open in new window ?
Code Select
'{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&amp;pos={$thumb['pos']}$uid_link",

this link code will not work
Code Select
'{LINK_TGT}' => "displayimage.php?pid={$thumb['pid']}&fullsize=1" target="_blank",

Give me some another Code
thank you

Joachim Müller

#12
October 03, 2007, 11:13:40 AM
Stop spreading your question all over the board. Particularly, don't ask for unrelated things on mod announcement threads.
Print
Go Up Pages1
User actions