Gowtham · Houghton, Michigan

CSS – Floating Next/Previous Links On Images

October 22nd, 2009 @ 09:36:23

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.

#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

<!--
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,

CSS – Floating Next/Previous Links On Images

CSS Part

HTML Part

Working Example

One response to “CSS – Floating Next/Previous Links On Images”