title: Navigation link area in fancybox
body: <p>I'm working on a photo gallery site using fancybox. The way it's working now, to navigate next/previous, the link area is tied to the position of the arrows. You can click anywhere from about the center of each image to the y axis of the arrow image. If I move the arrows out and away from the image, the clickable area widens with it. I do this in the css file. What my client wants (for some reason) is to be able to click right/left up to the edge of the browser window without the arrows being way out from the photo. </p>
  
  <p>How can I do that? Below is the section of the css file that controls the position of the arrow images (which are in base64 format):</p>
  
  <pre><code>a.fancybox-prev {
  left: 0px;
  }
  
  a.fancybox-next {
  right: 0px;
  }
  </code></pre>
  
  <p>Above moves the arrows in or away from the photo.</p>
  
  <pre><code>a.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  cursor: pointer;
  z-index: 8040;
  }
  </code></pre>
  
  <p>The above has to do with the sprite and vertical positioning.</p>
  
  <pre><code>a.fancybox-prev span {
  left: 0;
  background-position: 0 -50px;
  }
  
  a.fancybox-next span {
  right: 0;
  background-position: 0 -100px;
  }
  </code></pre>
  
  <p>The above also changes the arrows, close button and enlarge icons.</p>
  
  <p>I've tried all combinations, been at it for hours now. Any ideas on how to make the whole left half of the browser window a 'previous' link and the same for the right side of the window?</p>
  
  <p>Kirk</p>