featherlight.js: How to make nextIcon and previousIcon always visible

Question

I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.

By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.

But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.

Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.

Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?

Any help is greatly appreciated.

Welcome to stackoverflow! Please read this -> http://stackoverflow.com/help/how-to-ask It is not so clear what you are asking, and it is certainly impossible to answer anyway, since you are not providing the CSS or other details. — davidkonrad, Apr 08 '15 at 21:32

score 1 · Answer 1 · answered Apr 16 '15 at 10:30

Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).

First I set a bigger white border to the image:

.featherlight .featherlight-image { max-width: 100%; border: 32px solid #fff; }

then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:

.featherlight-next,
.featherlight-previous {
    display: block;
    position: absolute;     
    top: 25px;
    right: 0px;
    bottom: 0;
    left: 80%;
    cursor: pointer;
    /* preventing text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* IE9 hack, otherwise navigation doesn't appear */
    background: rgba(0,0,0,0);
}

.featherlight-previous {
    left:  0px;
    right: 80%;     
}

.featherlight-next:hover,
.featherlight-previous:hover {
    background: rgba(0,0,0,0.0);
}

.featherlight-next span,
.featherlight-previous span {
display: none;
    position: absolute;
        top: 50%;
        width: 80%; 
        font-size: 22px;
        line-height: 50px;
        /* center vertically */
        margin-top: -40px;
        color: #777;
        font-style: normal;
        font-weight: normal;
        text-shadow: 0px 0px 3px #888;
}

.featherlight-next span {
    right: 7px;
    left: auto;
    text-align: right;
}

.featherlight-previous span {
    right: 0px;
    left: 7px;      
    text-align: left;
}


.featherlight-next:hover span,
.featherlight-previous:hover span {
    display: inline-block;
}

/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
        display:none;
}

Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:

.featherlight:last-of-type {
    background: rgba(255, 255, 255, 0.6);
}

Hope this helps someone ;-)

score 0 · Answer 2 · answered Apr 08 '15 at 22:04

Check the source. You'll find how the hide/show is achieved:

    .featherlight-next span,
    .featherlight-previous span {
        display: none;
        // ...
    }
    .featherlight-next:hover span,
    .featherlight-previous:hover span {
        display: inline-block;
    }

So you simply need to override the display: none with your own custom rule.

featherlight.js: How to make nextIcon and previousIcon always visible

2 Answers2