Advanced search  

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]

Pages: [1] 2   Go Down

Author Topic: Image Viewer  (Read 39548 times)

0 Members and 2 Guests are viewing this topic.

rvblog

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 62
Image Viewer
« on: January 25, 2005, 10:33:42 am »

I've modified the hardwired theme to look like my website.

This is my problem:

When viewing images in the large image viewer (at smaller screen resolutions), my visitors have to scroll down the page a little bit to see the entire image displayed.

When they click on the next button (top right of the viewer), the viewer displays the next image, but the page is repositioned back to the top of the page, and the visitor has to scroll down a little bit once again to view the entire display.

Is there a way to add code somewhere that would keep the page at the "scrolled down position" as the visitor moves from image to image without them having to use the scroll bar each and every time ?

See here: http://www.rvadventure.ca/photos/displayimage.php?album=5&pos=1

Thanks
Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #1 on: January 25, 2005, 10:41:55 am »

I guess there could be an anchor placed at the top of the image box, and then add the anchor name to the next/prev links...
Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #2 on: January 25, 2005, 11:01:31 am »

OK, here's how to do it.

Open up the theme.php file of the theme you want to use. (code has been corrected to work in IE)

FIND:
Code: [Select]
$template_img_navbar = <<<EOT

AFTER it, FIND the first:
Code: [Select]
<td align="center" valign="middle" class="navmenu" width="48">

REPLACE with:
Code: [Select]
<a name="top_imageviewer"><td align="center" valign="middle" class="navmenu" width="48"></a>========


FIND:
Code: [Select]
href="{PREV_TGT}"
REPLACE with:
Code: [Select]
href="{PREV_TGT}#top_imageviewer"========

FIND:
Code: [Select]
href="{NEXT_TGT}"
REPLACE with:
Code: [Select]
href="{NEXT_TGT}#top_imageviewer"========

It works quite nicely, if I do say so myself. ;)
« Last Edit: January 26, 2005, 01:03:53 am by TranzNDance »
Logged

rvblog

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 62
Re: Image Viewer
« Reply #3 on: January 25, 2005, 04:13:26 pm »

Thanks,

That is EXACTLY what i wanted - it works great

I did make a small change to your example and placed
Code: [Select]
<a name="top_image" id="top_imageviewer"></a> after
Code: [Select]
$template_main_menu1 = <<<EOT
instead, so that my navbar always stays in view and appears at the top after each click

Have a look and see.

Also, I may be able to use this technique for other little adjustments as well - this will certainly be added to my little bag of tricks

I appreciate the help.
Logged

Casper

  • VIP
  • Coppermine addict
  • ***
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 5231
Re: Image Viewer
« Reply #4 on: January 25, 2005, 06:18:32 pm »

I think this is an excellent little hack, and would be appreciated by many users.
Logged
It has been a long time now since I did my little bit here, and have done no coding or any other such stuff since. I'm back to being a noob here

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #5 on: January 25, 2005, 07:14:58 pm »

argh... this doesn't seem to work in IE. WTH?! %$*&! @IE

I didn't test in IE before (but it was 2am my time when I worked on this). It's the same in both of our galleries, rvblog.
Logged

rvblog

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 62
Re: Image Viewer
« Reply #6 on: January 25, 2005, 08:15:59 pm »

@TranzNDance

ok, I played around with it a bit and I believe that this is the IE fix:

Code: [Select]
[b]<a name="topimage"></a>[/b]
Code: [Select]
[b]href="{PREV_TGT}#topimage"[/b]
Code: [Select]
[b]href="{NEXT_TGT}#topimage"[/b]
I remembered another issue I worked on last year where IE did not like names that had more than one word.

IE seems to work ok with #topimage but not #top_image


I removed the reference to "id="topimageviewer" because it looks like that would only be needed if you had to style it for some reason.
Logged

kegobeer

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 4637
  • Beer - it does a body good!
    • The Kazebeer Family Website
Re: Image Viewer
« Reply #7 on: January 25, 2005, 08:19:34 pm »

If you use id and name in the same link, they need to be the same.
Logged
Do not send me a private message unless I ask for one.  Make your post public so everyone can benefit.

There are no stupid questions
But there are a LOT of inquisitive idiots

rvblog

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 62
Re: Image Viewer
« Reply #8 on: January 25, 2005, 08:54:29 pm »

@TranzNDance:

I also noticed that in my album example - where there are 6 images - this code fix works for images 2 to 6 because the code fix is tied into the prev and next buttons

The first image in the image viewer still had to be scrolled.

So I backed up through the same thought process and added #topimage to the other code (in 2 places further down in the theme file) like this and it worked:

Code: [Select]
'{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}#topimage",
Now, when viewing the album list screen, when you click on any thumbnail, the image viewer in the next screen is positioned at the top like the other examples - so now, no scrolling at all is required.



Gee, this is scary - I actually sound like I know what I'm talking about.  LOL

Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #9 on: January 25, 2005, 11:16:36 pm »

If you use id and name in the same link, they need to be the same.
Doh! I'm a doofus (still, it was 2am ;D). I forgot to rename everything.

It still didn't work, though. I tried the other suggestions, too.

What seems to be the problem is that IE doesn't like the empty <a> tags. So I put the tags around the first <td> and it now works. Works in Opera, too. :)
« Last Edit: January 25, 2005, 11:32:13 pm by TranzNDance »
Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #10 on: January 25, 2005, 11:28:14 pm »

Gee, this is scary - I actually sound like I know what I'm talking about. LOL
Good for you :). It was Nibbler's idea for me to help out in the forums and I didn't think I could do it but here we are.
Logged

dondo521

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 24
Re: Image Viewer
« Reply #11 on: January 26, 2005, 12:59:35 am »

This looks awesome, wish I thought of something like this...!
Is it possible you could post the code entirely and where everything should go(what files to change...etc)?

Great job!
dondo521
Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #12 on: January 26, 2005, 01:02:37 am »

I did say which file to change. I only posted the parts of the file that was necessary to change instead of a completed file since people don't always have default, unmodded files.
Logged

rvblog

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 62
Re: Image Viewer
« Reply #13 on: January 26, 2005, 01:41:57 am »

@dondo521

Once TranzNDance told me about the "#whatevername" code, it's just a matter of playing around with it a bit - you just add it after the tag that affects the area that you want to position.

In my example (I started with the hardwired theme):

I added this code:

Code: [Select]
<a name="topimage"></a>after this tag:
Code: [Select]
$template_main_menu1 = <<<EOT
And then I changed these tags:

Code: [Select]
<a href="{SLIDESHOW_TGT}#topimage" title="{SLIDESHOW_TITLE}"><img src="themes/hardwired/images/slideshow.gif" width="21" height="15" border="0" align="absmiddle" alt="{SLIDESHOW_TITLE}" /></a>
Quote
<a href="{PREV_TGT}#topimage" class="navmenu_pic" title="{PREV_TITLE}"><img src="themes/hardwired/images/previmg.gif" width="18" height="15" border="0" align="absmiddle" alt="{PREV_TITLE}" /></a>

Code: [Select]
<a href="{NEXT_TGT}#topimage" class="navmenu_pic" title="{NEXT_TITLE}"><img src="themes/hardwired/images/nextimg.gif" width="18" height="15" border="0" align="absmiddle" alt="{NEXT_TITLE}" /></a>
Code: [Select]
'{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}#topimage",
Just use the search feature in your php editor to find the appropriate tags in whatever theme you are using and from there.

Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #14 on: January 26, 2005, 02:11:59 am »

@rvblog, the anchor isn't working on your site in IE due to there being nothing between the <a> tags... just in case you have visitors using IE still. ;)
Logged

kegobeer

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 4637
  • Beer - it does a body good!
    • The Kazebeer Family Website
Re: Image Viewer
« Reply #15 on: January 26, 2005, 02:24:04 am »

[offtopic]
@rvblog: I get a javascript syntax error when I view your site with IE.

Line: 20
Char: 1
Error: Syntax Error
Code: 0
[/offtopic]

@all: From the W3C:
Quote
User agents should be able to find anchors created by empty A elements, but some fail to do so.
Logged
Do not send me a private message unless I ask for one.  Make your post public so everyone can benefit.

There are no stupid questions
But there are a LOT of inquisitive idiots

rvblog

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 62
Re: Image Viewer
« Reply #16 on: January 26, 2005, 04:15:01 am »

@TranzNDance:

Everything seemed to work ok on my end when I used IE - but I moved the code anyways - like this:

(note: the name=#topimage was added to the <a> tag about half way down in the code example)

Code: [Select]
$template_main_menu2 = <<<EOT
                <span class="topmenu">
                        <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
<!-- BEGIN album_list -->
<!--
         <td><img name="spacer" src="images/spacer.gif" width="5" height="25" border="0" id="spacer" alt="" /></td>
         <td><img name="buttonleft1" src="themes/ardwired/images/buttonleft1.gif" width="7" height="25" border="0" id="buttonleft" alt="" /></td>
-->

  <td background="themes/ardwired/images/buttoncenter1.gif"><a href="http://www.rvadventure.ca" title="Return to Home Page">Home</a>
          <a name="topimage" href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}">{ALB_LIST_LNK}</a>
          </td>
<!--
  <td><img name="buttonright1" src="themes/hardwired/images/buttonright1.gif" width="7" height="25" border="0" id="buttonright1" alt="" /></td>
-->
<!-- END album_list -->


Does that resolve the
Quote
nothing between the <a> tags...
statement that you were talking about ?



@ kegobeer:

I also noticed the error at the bottom left corner of my browser - but had no idea what it meant

And, I don't really understand what it is you are saying in your reply

I went here :

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.rvadventure.ca%2F

and here:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.rvadventure.ca%2F

and everything validated ok

So what is causing the error and how do I fix it ?? - I know absolutely nothing about javascript.

Thanks

Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image Viewer
« Reply #17 on: January 26, 2005, 04:25:59 am »

@TranzNDance:

Everything seemed to work ok on my end when I used IE - but I moved the code anyways
Works now. I'm using IE6, SP2.
Logged

kegobeer

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 4637
  • Beer - it does a body good!
    • The Kazebeer Family Website
Re: Image Viewer
« Reply #18 on: January 26, 2005, 04:33:23 am »

I don't know if this is related, but if I view source on your page, this is displayed:
<html dir="{lang_dir}">

but it should be this:
<html dir="ltr">

Verify you have this line in your theme.php file, in the pageheader function:
Code: [Select]
$template_vars = array('{LANG_DIR}' => $lang_text_dir,
Logged
Do not send me a private message unless I ask for one.  Make your post public so everyone can benefit.

There are no stupid questions
But there are a LOT of inquisitive idiots

dondo521

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 24
Re: Image Viewer
« Reply #19 on: January 26, 2005, 04:50:35 am »

Thanks everyone for all your help...seems to work ok in I.E. but unfortunetly not in Firefox ???
dondo521

by the way nice looking site TranzNDance-very clean and well thought out... ;)
Logged
Pages: [1] 2   Go Up
 

Page created in 0.025 seconds with 19 queries.