Question

I am using fancybox to display some images. Currently when users hover the image, the next or previous button will shown. However, some users actually do not realise that and close the fancybox after view the first image.

So, I wish to let the buttons stay visible all the time. However, I got no idea how to do that. I tried to change the fancybox css

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: block; // Initially it was "none"
   }

But it is not working as well.

Any idea how to do that?

Appreciate any help…Thanks…

Answer 1

You’ll need to add the css on the page (after the initial css loads)-

For example, add this to the page with your fancybox, or after your fancybox css stylesheet in the head.

<style type="text/css">

#fancybox-left-ico {
left: 20px;
}

#fancybox-right-ico {
right: 20px;
left: auto;
}

</style> 

And that’s it.