Fancybox keep previous and next arrow always visible

Navigation
2

On my site I'm using fancyBox to show a product image, it's working fine, but I need to leave the "Previous" and "Next" arrows always visible to make it clearer to the user that there is a navigation, I do not have enough knowledge for such a feat.

On my site I'm using this FancyBox: FancyBox

The references I found for an attempt to 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;
}
    
asked by anonymous 24.02.2015 / 19:43

1 answer

1

You can add this to your css: 

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

Font

    
24.02.2015 / 19:58
Back button with searched records How to convert latitude / longitude to Double in C #