homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

placing arrows within a gallery
need help placing arrows within a gallery
hopeless in cnp

 6:44 pm on Jul 24, 2011 (gmt 0)

My website contains several pages each containing a photo gallery. Currently, the 'next' and 'back' arrows are placed under the photos. This creates a problem in that some of the iamges are portrait and some are landscape. This causes the arrows to 'move down' when a portrait-sized image follows a landscaped-sized image. So, I thought if I place the arrows withinthe images it won't matter what the image dimensions are -- the arrows will appear to be anchored. I don't know how to do this. I had someone else do the arrows for me in the first place, and have no clue how to change it. If it helps, the website is www.cnp-pm.ca




 3:10 pm on Jul 25, 2011 (gmt 0)

I always placed the arrows and description to the side of the image to avoid these problems so I can't help in detail. I have observed however that a lot of users don't seem to grasp the idea of the arrows. I have gone back to using "next" and "previous" text links as well.

hopeless in cnp

 3:59 pm on Jul 25, 2011 (gmt 0)

I don't have room on either side of the images for text, i.e.: next and previous, but I could move the arrows to either side of the images if someone could tell me how to do that. Thanks, Terri


 4:13 pm on Jul 25, 2011 (gmt 0)

Why not put the arrows above the image? Then they will always be in the same position regardless of the image height.

hopeless in cnp

 4:36 pm on Jul 25, 2011 (gmt 0)

We had it that way once -- I didn't like the look of it, but maybe if I could make the arrows smaller and put the page numbers ( 1 of 15) right in the middle between the arrows so it would all be on line (so to speak) -- that might be okay. It should be mentioned this isn't my website, I only maintain it for my client, changing out photos as needed. She wants the arrows, but she wants them to appear anchored. So, maybe they should be on top. How do I do that? By the way, the site is www.cnp-pm.ca for reference.


 3:55 pm on Jul 26, 2011 (gmt 0)

So, I thought if I place the arrows within the images it won't matter what the image dimensions are -- the arrows will appear to be anchored.

This is not copy and paste code, but something like this should work.

You need the outer container to change size with the photos - one way to do that is to float it and have the container within that float. This gives a "shrink wrap" effect due to the fact that a floated element will contain all it's floated children. The only down side is you may not be able to assign a width to the floated elements, which can sometimes be problematic (especially in - you guessed it - Internet Destroyer.) If you can assign the container div a width dynamically as you output the images (probably from getting the image size,) that solves that piece.

Once you sort that out, you assign position: relative to the outer container, allowing you to assign position: absolute to the arrows.

.photo-outer { float: left; position: relative; }
.photo-outer img { float: left; border: none; position: relative; }
.arrows { position: absolute; width; 60px; height: 25px; bottom:12px; right: 12px; } /* or even top 50%, which would be 50% of the relative div */
.arrows .left, .arrows .right,
.arrows .left a, .arrows .right a { width: 25px; height: 25px; padding:0; display: block; text-indent:-50000px; outline: none; text-decoration: none; }
.arrows .left, .arrows .right { float: left; margin: 0 0 0 5px; }
.arrows .left a, .arrows .right a { background-position: top left; background-repeat: no-repeat; }
.arrows .left a:hover, .arrows .right a:hover { background-position: bottom left; }
.arrows .left a { background-image: url(/images/left-arrow.gif); z-index: 500; }
.arrows .right a { background-image: url(/images/right-arrow.gif); z-index: 501; }

<div class="photo-outer">
<div class="arrows">
<p class="left"><a href="your-prev-url.html">Previous</a></p>
<p class="right"><a href="your-next-url.html">Next</a></p>
<img src="/images/gallery/your-image.jpg" alt="Image one">

Hmm, could/should wrap the image in a P but something like that will work . . . the images left and right are a stacked image, allowing you to get a mouseover state by background-position, and the text-indent allows you to use real text in the source code.

non-mouseover part of image
mouseover part of image

(so the actual image is 50px tall)

Better, if you can get at the image widths as you're outputting:

<div class="photo-outer" style="width: [width of the image];">

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved