Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Mod - autoshift display image page according to context (i.e. skip headers)  (Read 23467 times)

0 Members and 1 Guest are viewing this topic.

kaptainkory

  • Tester
  • Coppermine regular visitor
  • *
  • Offline Offline
  • Posts: 51

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.
« Last Edit: May 05, 2006, 04:57:14 pm by GauGau »
Logged

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net

url preview ?

snork13

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 260
  • Internet! Is that thing still around?
    • Gallery

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
« Last Edit: August 10, 2005, 04:28:02 pm by snork13 »
Logged

kaptainkory

  • Tester
  • Coppermine regular visitor
  • *
  • Offline Offline
  • Posts: 51

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.
Logged

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net

I think I'm dumb : I see nothing. On the both sites.

snork13

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 260
  • Internet! Is that thing still around?
    • Gallery

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
Logged

snork13

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 260
  • Internet! Is that thing still around?
    • Gallery

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
Logged

kaptainkory

  • Tester
  • Coppermine regular visitor
  • *
  • Offline Offline
  • Posts: 51

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.
Logged

snork13

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 260
  • Internet! Is that thing still around?
    • Gallery

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
Logged

Gephri

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 235
autoshift display image for slideshow
« Reply #9 on: 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
Logged

sharon1

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 21

Thanks for the great mod, kaptainkory.  It works great!

Sharon
Logged

hassan784

  • Coppermine newbie
  • Offline Offline
  • Posts: 15
Re: Mod - autoshift display image page according to context (i.e. skip headers)
« Reply #11 on: 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
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de

Stop spreading your question all over the board. Particularly, don't ask for unrelated things on mod announcement threads.
Logged
Pages: [1]   Go Up
 

Page created in 0.022 seconds with 20 queries.