forum.coppermine-gallery.net
Support => cpg1.3.x Support => Older/other versions => cpg1.3 Themes/Skins/Templates => Topic started by: rvblog 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 (http://www.rvadventure.ca/photos/displayimage.php?album=5&pos=1)
Thanks
-
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...
-
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:
$template_img_navbar = <<<EOT
AFTER it, FIND the first:
<td align="center" valign="middle" class="navmenu" width="48">
REPLACE with:
<a name="top_imageviewer"><td align="center" valign="middle" class="navmenu" width="48"></a>========
FIND:
href="{PREV_TGT}"
REPLACE with:
href="{PREV_TGT}#top_imageviewer"========
FIND:
href="{NEXT_TGT}"
REPLACE with:
href="{NEXT_TGT}#top_imageviewer"========
It works quite nicely, if I do say so myself. ;)
-
Thanks,
That is EXACTLY what i wanted - it works great
I did make a small change to your example and placed <a name="top_image" id="top_imageviewer"></a> after $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.
-
I think this is an excellent little hack, and would be appreciated by many users.
-
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.
-
@TranzNDance
ok, I played around with it a bit and I believe that this is the IE fix:
[b]<a name="topimage"></a>[/b]
[b]href="{PREV_TGT}#topimage"[/b]
[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.
-
If you use id and name in the same link, they need to be the same.
-
@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:
'{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
-
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. :)
-
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.
-
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
-
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.
-
@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:
<a name="topimage"></a>after this tag:
$template_main_menu1 = <<<EOT
And then I changed these tags:
<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>
<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>
'{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.
-
@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. ;)
-
[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 (http://www.w3.org/TR/html40/struct/links.html#h-12.2.1):
User agents should be able to find anchors created by empty A elements, but some fail to do so.
-
@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)
$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:
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.
-
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:
$template_vars = array('{LANG_DIR}' => $lang_text_dir,
-
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... ;)
-
Thanks everyone for all your help...seems to work ok in I.E. but unfortunetly not in Firefox ???
Really? I tested in Firefox and it worked fine until I checked in IE. Could you please post a link to your site?
by the way nice looking site TranzNDance-very clean and well thought out... ;)
Thank you. :)
-
Well it's not much of a site right now but here it is:
so the bots wont get this: just do the usual www thing and then
oceanwalkphotographers and then the dot com and then /owo
The only time it works in Firefox is when I refresh the page-but not when I move back and forth with the arrows
dondo521
-
@kegobeer:
In response to the question:
Verify you have this line in your theme.php file, in the pageheader function:
Code:
$template_vars = array('{LANG_DIR}' => $lang_text_dir,
Yes, the code that I have in the pageheader function section in the theme.php file is identical to that.
In response to this question:
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">
The code that you refer to:
<html dir="{lang_dir}">
is located at the top of the template.html file - that piece of code was in there in the original hardwired theme, so I just left it there.
Should I remove it ?
Or, replace it with this:
<html dir="ltr">
Thanks
-
By the way,
I'm still getting the javascript error - any ideas why ??
On another note:
My content section (div class="content") is a long page under Firefox and a much shorter page under IE - is there a way to have the page appear as equal depth in both browsers ?
-
Probably not related, but there were some errors in the code elsewhere:
themes/ardwired/images/buttoncenter.gif
<meta http-equiv="content-type" content="text/html; charset={charset}" />
If you correct the charset one, you can use W3C to validate the page and it could help pinpoint the issue. http://forum.coppermine-gallery.net/index.php?topic=13604.0
-
For some reason, {lang_dir} and {charset} aren't being parsed. I'm not sure why, but the culprit is most likely your modified theme. I think you'll have to compare it line-by-line with another theme to see where the problem may be.
-
It's because the parsing function is case-sensitive. If {lang_dir} and {charset} are made all uppercase, it will work. I tried it on my gallery, except went from upper to lower case and got the parsing failure.
-
I went to W3C to use the validation feature there.
I checked out my site: www.rvadventure.ca/photos - and got all kinds of validation errors - wow !!
So, I turned off my theme and turned on the original hardwired theme in the config panel - and W3C showed all kinds of errors as well
So, thinking it was an issue with the hardwired theme itself, I changed over to coppermine's eyeball theme - and guess what? - got all kinds of errors with that theme as well.
Then I changed to cpooermine's classic theme - and the same thing happened.
So, it appears that all of the theme templates that coppermine uses all have problems regarding validation at the W3C site
So what do I do now as far as a theme template - just ignore it ??
I've spent so much time on coppermine - I would hate to have to change to another gallery program.
-
I spent some time checking other themes out
In all the packaged themes in coppermine, the template is this kind of doc type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
So I went outside of the included themes and checked out other themes like reynolds, forest, 2bornot2b, etc and those templates has this kind of doc type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
So, I uploaded those themes, selected each of them in the config panel - and all three themes only got 4 minor errors at the W3C validation site.
So I guess I'll have to change the base for my theme and see what happens.
-
validation issues have been discussed elsewhere already. Just a short statement: both the cpg1.3.x core code as well as the themes that come with it will not validate, and it would take a huge effort to make them validate - I wouldn't recommend that. When you try validating some sites of "the big boys" (try MSN for a start ;)), the same thing happens: currently, there are only very few pages that actually validate properly. However, they stil are correctly displayed in most browsers. Some of the code that keeps them from validating even is in there to provide cross-browser compatibility. The next version of coppermine (the current devel version cpg1.4.x) will be standards compliant by default and will validate (xhtml transitional) - you're welcome to test it.
Bottom line is: I wouldn't worry to much about valid html for now - you will hardly find another gallery app that will actually produce valid code.
Joachim
-
@rvblog:
The hardwired template.html has {lang_dir} and {charset} - change them to {LANG_DIR} and {CHARSET} as Tranz suggests.
-
OK then
I'll use what I have with the changes that have been suggested
When 1.4 comes out, will it I have to build a new theme again - or will it be a smooth transition from 1.3.2 to 1.4 ?
Any idea when 1.4 will be ready?
-
When 1.4 comes out, will it I have to build a new theme again - or will it be a smooth transition from 1.3.2 to 1.4 ?
There will be instructions on how to update your custom theme to make it work with the new versions.
Any idea when 1.4 will be ready?
No. It currently is in beta stage. No telling when it will be ready as stable.
Joachim
-
Sorry, I wasn't saying the whole page should validate. I just thought the validation process could point out an error in the javascript that could help with troubleshooting.
-
Second try:
The #topimage code was acting up every now and then, so I dropped that idea and decided to eliminate my header pic in order to move the imageviewer higher up on the screen.
I also dropped "hardwired" as a base for my theme and used the classic theme as my new base - but I stayed with and modified the hardwired template and I used part of the admin_menu layout and css that was in a theme called "forest" (don't remember where I found that theme).
I also got rid of the javascript error (don't ask me what I did - but after some trial and error it disappeared.
Anyways, I wanted my theme to be very simple and easy on the eyes - I also added my site navbar to easy navigation back and forth.
This is the new result: http://www.rvadventure.ca/photos/index.php
Now I can start uploading my photo files this weekend.
Thanks for everyone's help getting me this far.
-
Looks nice. great work ;D
-
You could always use a pure-JavaScript solution:
Here is an image viewer, in object-oriented, cross-browser JavaScript. Very easy to plug and play, with "slide show" feature, and fully customisable in CSS and HTML:
http://www.webonweboff.com/widgets/js/image_viewer.aspx (http://www.webonweboff.com/widgets/js/image_viewer.aspx)
Article includes a demo, source code, explanations.
Hope this helps...
-
Hi guys,
sorry to bump such an old thread, but I'm having issues with this workaround.
I'm no coder, even less of a designer, and i have a very basic understanding of how a script work.
I am using CPG 1.4.10 with a them called Avalanche.
The theme.php file included in the Avalanche theme is nearly empty, and doesn't contain all the lines of code that have been mentioning.
As an alternative, i tried to modify the theme.inc.php that can be found in the include folder, with no success.
Any idea on how to fix this?
Link to my gallery: http://ed.roquette.free.fr/photo/
Thanks!
-
I am using CPG 1.4.10 with a them called Avalanche.
Then create a new thread on proper board (cpg1.4 themes/skins/templates (http://forum.coppermine-gallery.net/index.php?board=51.0))
This one is locked...