Next/Prev Arrow Line-up

lee.maher5898 · August 31st, 2012, 12:58 PM

Hi Chuck,

Just upgraded to v8.21 and noticed that now the Next/Prev arrows used to move between pics are not lined-up correctly anymore. It appears that the Prev arrow aligns to the picture border, whereas the Next arrow lines-up with the picture frame border.

Regards, Lee

Chuck S · August 31st, 2012, 01:04 PM

I would need to see examples here

http://www.reeftalk.com/gallery/Fami...-dscn0699.html

The arrows introduced in PP8 are kinda relative they usually are within x amount of pixels

Jellyfish - Omegatron Gallery

it is not exact as picture sizes vary.

lee.maher5898 · August 31st, 2012, 01:18 PM

Hi Chuck,

Here's an example of what I mean. This is the picture I spotted it on.

I then took a look at the margins using Firefox's 'Firebug' Add-on (I don't know if you use this? Great for seeing graphically behind the code). Using the Element Inspector feature, I can see that the Prev (left) aligns properly with the edge of the picture, but the Next (right) aligns to either the outer edge border of the frame as in the example given, or sits inside this by about 10-15 pixels (as seen in another picture). There appears to be a problem with the line-up of the right arrow's margin?

I didn't see this problem in 8.12.

Regards, Lee

Chuck S · August 31st, 2012, 01:53 PM

Not really the kind of example I was asking for since I can not see your page source.

I gave you two live examples. Here is how we do it in pp-inc.php

Code:

Content visible to verified customers only.

Basically it is all done by css and that right arrow is all relative like I said we can only estimate as the right arrow position would change for every photo. The left arrow is easy as it has no largin it is always to the left and its margin if any is the actual size of the image which is 20px wide. Since we need to show that right arrow by making the margin left a certain size. A fixed number like take 40 pixels off the width does not work as picture sizes change.

I use .93 of the width as that works for most all picture sizes I tested. It may not be exact but it is close.

You can experiment by changing that to .91 or .87 which is what we use in the mobile setup as that was the closest number percentage that works for mobile sizes.

lee.maher5898 · August 31st, 2012, 03:58 PM

Hi Chuck,

Played around with the numbers as suggested, but it looks as if you've already worked-out about the best compromise at .93. The reason I noticed this difference in distance from the margins was because the latest set of photos uploaded had a photo turned long-side up! Strange how it offsets more on up-ended photos than long-side down (if you get what I mean).

I suppose if there was a way of computing the picture width then the arrow could be placed absolute from the margin.

Thanks for assisting me here!

Regards, Lee

Chuck S · August 31st, 2012, 04:05 PM

We compute the distance based on the photo width. What I am saying is there is no absolute as photo widths are different.

Code:

Content visible to verified customers only.

The position is absolute it is the margin width that says how far it is over.

lee.maher5898 · September 2nd, 2012, 01:30 PM

Just an idea, but you could always place the buttons underneath the photo centrally aligned so it would not matter the width of the photo at all?

Chuck S · September 2nd, 2012, 02:15 PM

Yes that is an option as we use to have arrows beneath the photo. Michael wanted to do arrows more like facebook and other social media sites.