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 | <!-- 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"); --> |
Working Example
Kinda knew this was coming so, I will give you two – here and here,
One Reply to “CSS – Floating Next/Previous Links On Images”