« MAC – Upgrading MacPorts | PHP – Computing Total Travel Distance From GPS Tracks »
CSS – Floating Next/Previous Links On Images
October 22nd, 2009 @ 09:36:23 | CSS, Web
Why is this necessary, you ask? Ever since I first used PixelPost and deliciously delicious theme, I had been wanting to do something similar for my own photo gallery. Since PixelPost [nor any other photoblog software] ever came close to satisfying my needs, I ended up writing [still a work in progress to some extent] one on my own and the desire to have a jazzy Next and Previous links floating on images. Not reading through the CSS and trying to understand how exactly it was to be accomplished, I was under the [wrong] assumption that knowledge of Javascript was necessary/mandatory.
And recently, fine friends/members of Linux Users Group @ Michigan Tech set my assumptions straight and hinted that I could just use CSS to accomplish the same. As such, I ended up reading a bit more in detail about CSS, read carefully through the stylesheet of delicious theme and modified ever so slightly to fit my needs.
CSS Part
Preferably, this should go into the existing [new] CSS file and that file should then be included into the HTML/PHP file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | #showcase_holder { background: #000000 url('images/loading.gif') 50% 50% no-repeat; position: relative; } #showcase_image_border { position: relative; margin: 0; } #showcase_navigation { position: absolute; margin: 0px; margin-right: -10px; padding: 0px; top: 0px; left: 0px; z-index: 1000; } #showcase_navigation a { outline: none; } #showcase_navigation_prev, #showcase_navigation_next { width: 49.9%; height: 100%; /* Trick IE into showing hover */ background: transparent url('images/blank.gif') no-repeat; display: block; } #showcase_navigation_prev { top: 0px; left: 0px; float: left; } #showcase_navigation_next { top: 0px; right: 0px; float: right; } #showcase_navigation_prev:hover, #showcase_navigation_prev:visited:hover { background: url('images/left_arrow.png') no-repeat 50% 50%; cursor: pointer; } #showcase_navigation_next:hover, #showcase_navigation_next:visited:hover { background: url('images/right_arrow.png') no-repeat 50% 50%; cursor: pointer; } |
Download the following files, if you wish.
loading.gif | blank.gif | left_arrow.png | right_arrow.png
HTML Part
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- Terms in UPPER CASE indicate variables that need to be somehow/automagically supplied for proper functioning. If your image details are stored in a MySQL database and you are serving the page using PHP, you may use the getimagesize() function as follows: list($width, $height, $type, $attribs) = getimagesize("filename.jpg"); --> <div id="showcase_holder" style="width:IMAGE_WIDTHpx;height:IMAGE_HEIGHTpx;"> <div id="showcase_image_border" style="width:IMAGE_WIDTHpx;height:IMAGE_HEIGHTpx;"> <img src="CURRENT_IMAGE_URL" title="Image Title" alt="Image Title" id="photo" name="photo" style="background:black;"> <div id="showcase_navigation" style="width:IMAGE_WIDTHpx;height:IMAGE_HEIGHTpx;"> <a href="PREV_IMAGE_URL" id="showcase_navigation_prev"></a> <a href="NEXT_IMAGE_URL" id="showcase_navigation_next"></a> </div> </div> </div> |
Working Example
Kinda knew this was coming so, I will give you two – here and here,
[...] reading here: CSS – Floating Next/Previous Links On Images [...]
superb article . Will definitely copy it to my blog.Thanks.
Well. Not rather what I expected, but you might have produced me assume about this subject from yet another perspective. Excellent job.
A powerful share, I simply given this onto a colleague who was doing a bit of evaluation on this. And he in reality bought me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the treat! However yeah Thnkx for spending the time to discuss this, I feel strongly about it and love studying more on this topic. If attainable, as you develop into expertise, would you thoughts updating your blog with extra particulars? It’s extremely useful for me. Large thumb up for this weblog put up!