Position of arrows in the Zenpage Theme

huogas

I tried a fiew others, and always come back to the ZenPage Theme.

I like it but I have a problem with the positions of the arrows to go from one picture to another. These arrows are positioned in the Title section. Would it be easy to move these arrows just below the picture, at the right of the description ? Or using the keyboard arrows to go from one to another ?

If feasible, it it something that someone without PHP knowledge can do ?

Thanks

Gaston

Laurent

Yes

How can change these in the css file of the zenpage theme.
Look for `.imgnav` class

Laurent

acrylian

Glad you like the theme..;-) As Laurent said actually no PHP is needed, just be plain HTML/CSS.

huogas

Thanks Laurent and Malte.

Yes I like it. Simple, quite complete, efficient (except for the arrows positioning...;-))

I have looked at .imgnav class and, well...I think I will finally have to learn CSS...

To get me started, could you do 2 things for me:

-give me a good url address to learn CSS
-give me one or two more hints on how to do what I want to do here ?

Thanks

Gaston

acrylian

http://www.w3schools.com/ is a quite good site in English I think.

If you want to place the arrows near the description, you might consider modifying the html as well and moving them als directly.

Laurent

You also have this site `http://www.alsacreations.com/` it's in french but i believe that your are a french guy ;-)

If you want to change the navigation arrow just cut this code :
`

<?php if (hasPrevImage()) { ?>

" title="<?php echo gettext("Previous Image"); ?>">« <?php echo gettext("prev"); ?>

<?php } if (hasNextImage()) { ?>

" title="<?php echo gettext("Next Image"); ?>"><?php echo gettext("next"); ?> »

<?php } ?>

`
To the `

` section of the image.php file. I think you'll have to play a little with the css anyway.

Hope this help
Laurent

huogas

Thanks again Malte and Laurent (yes I'm french ... canadian).

I will try that.

Gaston

huogas

Wow! It works quite well. Still a change to make to have the description beside the 2 arrows. I will find how to do it.

Tell me, it it possible, when we click the arrows, to keep the top of the picture at the same relative position from the top of the window(instead of going to the top of the page on every click) ?

Gaston

acrylian

1. You probably have to modify the theme a little more.

2. No, that is not possible as the page reloads (Safari/Webkit browser do this in some case). You might maybe want to experiment with page internal anchors (#something). Actually this is the reason (for smaller screens also) why the arrows are on top of the page..;-)

huogas

I think that using the "page internal anchors" is a good idea. I will try it.

Do you think that it is possible to use the keyboard arrow keys as a way to go from one picture to another ?

Thanks

Gaston

acrylian

See here: http://www.w3schools.com/TAGS/ref_standardattributes.asp

Laurent

Sure, paste this :

`



`
in your image.php file ... and play with keyboard arrow ;-)

PS: This code is not from me, but i dont' remember where i found it !

Laurent

huogas

Wow! Laurent, are you a wizard ?
It works ! No more needs to install new arrows below the image.

I just have to install anchors right above the image and "branch" there on an arrow click.

Thanks,

Gaston

Laurent

;-)

Laurent

huogas

Is there a reason why this modification (the one about using the keyboard arrows)would not be part of the core ?

Gaston

sbillard

Well, if we put everything into the core we would have to come up with a new name and philosophy for Zenphoto. But, of course, it is always possible to create a plugin that would add this to themes when the site owner chooses.

Anyone can create a plugin. this one would be fairly simple to do. Just place all that code into a string and pass it to the `addPluginScript($script)` function. For instance he jcarosel_thumb_nav plugin (as an example) does this. That would be all there was to the plugin, pretty simple.

Should you (or any one else) choose to make such a plugin, let us know. We will add it to our list of third party plugins.

huogas

Thanks. I will try that.

Gaston

acrylian

Just to add, things like keyboard navigation are also theme decisions.

huogas

Malte

In this specific case, do you see any bad side effects ?

Gaston

Laurent

I did it (the plugin) with another code. I think it's better.
But i need some help ... there a strange thing.
When i put the code into the image.php file the keyboard navigation works fine, only the picture load.
When i put the code to the plugin, the full web page are reloded. It's not very pleasant and it's quite long.
I notice that the code are place outside the <head> section and even the <html> tag.
I use the addPluginScript to place the code.
Is there a way to place the code in the head or body section ?

Laurent

sbillard

There is no way to get code automatically included in the theme other than the addPluginScript(). You could provide a function that emits the code, but the theme user would have to place a call to the function in his script in the appropriate place.

I am not sure why there is a difference in the behavior, though. The code above (as I read it) should always load a new page, not a simply a new picture. That is what you get from the getNextImageURL() and getPrevImageURL() functions.

If you want to just load the image you would have to have Javascript that modified the <img src....> Html

acrylian

@huogas: No, no side effects, it's just a matter of how a theme is setup.

I agree if you don't want to load the page you have to write some js code for that. It is possible but can't hardly be generalize as it is HTML dependend (since you probably don't want only the image to change but the title, desc, arrows etc as well).

Laurent

Thanks for your answer.
Here is the new code :

`



`
I'll try to do it with a function.

Laurent

huogas

Laurent

What is the main difference with the previous code ?

Thanks

Gaston

Laurent

When you're writing a comment for a photo, and if you made a spelling mistake, for example you use the left or right arrow to correct this. With the first code, the picture change ... not really good !
With the second code, you can use the keyboard arrow in a comment area.

Laurent

huogas

Thanks Laurent.

It's just sad, you could have done a new game: try to catch the end of your comments before the picture changes... ;-)

Gaston

Laurent

I made the plugin. You're right Sbillard is was simple ;-)
So you can see it in action on my site : `http://www.latitudes-photos.com`

You can download and have information at this page :
`http://www.latitudes-photos.com/keyboardnav`

But, my english is very poor so can someone can make a better translation please :-)

Thanks
Laurent

huogas

Looks good. By the way, very very nice site and pictures.

Thanks Laurent

Gaston
ps: your english looks ok to me... ;-)

acrylian

The English description is not that bad...;-). But maybe you should mention which keys you actually can use.

Will add an entry to our extensions section soon.

Laurent

Thanks Acrylian.
I have update the description and a on witch version i have test it.

Laurent

acrylian

Laurent, you might want to submit your site to the showcase.