Fancybox keep arrow back and next always visible

Question

On my site I am using the fancybox to show a product image, it is working right, but I need to make the arrows "Previous" and "Next" always visible to make it clear to the user that there is a navigation, I do not have enough knowledge to do so.

On my website I am using this Fancybox: Fancybox

The references I found for an attempt at change, are these:

.fancybox-prev, .fancybox-next {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    background: transparent url('../../images/fancybox/blank.gif'); /* helps IE */
    z-index: 1003;
}

.fancybox-prev {
    left: 0;    
}

.fancybox-next {
    right: 0;
}

.fancybox-prev span, .fancybox-next span {
    position: absolute;
    top: 50%;
    left: -9999px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 1003;
}

.fancybox-prev span {
    background-position: 0 -36px;
}

.fancybox-next span {
    background-position: 0 -72px;
}

.fancybox-prev:hover, .fancybox-next:hover {
    visibility: visible;
}

.fancybox-prev:hover span {
    left: 20px;
}

.fancybox-next:hover span {
    left: auto;
    right: 20px;
}

Answer 1

You can add this to your css:

 .fancybox-next span {
    left: auto;
    right: 20px;
 }
 .fancybox-prev span {
    left: 20px;
 }

Source