I'm currently in the process of creating a photo gallery website with fancybox. As it stands, the navigation for moving to the next/previous image is tied to the position of the arrow icons. Clicking anywhere from the middle of each image to the y-axis of the arrow icon will allow you to navigate. My current setup involves adjusting the position of the arrows in the CSS file itself. However, my client has requested the ability to click on the extreme edges of the browser window to move between images, without having the arrows positioned too far away from the photos.
Is there a way to achieve this? The following snippet of code from the CSS file controls the location of the arrow images:
a.fancybox-prev {
left: 0px;
}
a.fancybox-next {
right: 0px;
}
The above code determines whether the arrows are moved closer or further away from the photos.
a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
}
This section of the code relates to the sprite and vertical positioning of the elements.
a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}
a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}
In addition, the above code also affects the appearance of the arrows, close button, and enlarge icons.
I've experimented with different combinations for hours now but haven't found a solution yet. Does anyone have any suggestions on how I can make the left half of the browser window act as the 'previous' link, and the right side function as the 'next' link?
Kirk