Image Viewer

[rvblog]

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

[TranzNDance]

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

[TranzNDance]

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:

$template_img_navbar = <<<EOT

AFTER it, FIND the first:

Code:

<td align="center" valign="middle" class="navmenu" width="48">

REPLACE with:

Code:

<a name="top_imageviewer"><td align="center" valign="middle" class="navmenu" width="48"></a>

========


FIND:

Code:

href="{PREV_TGT}"

REPLACE with:

Code:

href="{PREV_TGT}#top_imageviewer"

========

FIND:

Code:

href="{NEXT_TGT}"

REPLACE with:

Code:

href="{NEXT_TGT}#top_imageviewer"

========

It works quite nicely, if I do say so myself.

[rvblog]

Thanks,

That is EXACTLY what i wanted - it works great

I did make a small change to your example and placed

Code:

<a name="top_image" id="top_imageviewer"></a>

after

Code:

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

[Casper]

I think this is an excellent little hack, and would be appreciated by many users.

[TranzNDance]

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.

[rvblog]

@TranzNDance

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

Code:

[b]<a name="topimage"></a>[/b]

Code:

[b]href="{PREV_TGT}#topimage"[/b]

Code:

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

[kegobeer]

If you use id and name in the same link, they need to be the same.

[rvblog]

@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:

'{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

[TranzNDance]

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

[TranzNDance]

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.

[dondo521]

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

[TranzNDance]

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.

[rvblog]

@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:

<a name="topimage"></a>

after this tag:

Code:

$template_main_menu1 = <<<EOT

And then I changed these tags:

Code:

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

<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:

<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:

'{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.

[TranzNDance]

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

[kegobeer]

[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:

User agents should be able to find anchors created by empty A elements, but some fail to do so.

[rvblog]

@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:

$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

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

[TranzNDance]

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

[kegobeer]

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:

$template_vars = array('{LANG_DIR}' => $lang_text_dir,

[dondo521]

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