Enable navigation arrows on mobile?

[adrianocr]

Is there a way to display navigation arrows on mobile? I ask because it's not 100% obvious that the user should drag left and right. There is also no "notice" displayed.

[marcandre]

The default CSS shows navigation on hover only. There is no hover on mobile though... Currently, we don't even build the navigation on mobile. Would you want to show the navigation all the time?

[robneu]

FWIW, We had a lot of requests for this on our WordPress plugin version of featherlight and ended up making the default CSS include the navigation arrows. People found it confusing that there was no indication that you were viewing a gallery on mobile.

That said, our styles are significantly different from the default featherlight styles, so it was easier to accommodate the request. The default featherlight styles are kind of overwhelming on a small screen.

[adrianocr]

@marcandre yes I'd be interested in showing the left and right arrow all the time on mobile. Would it be something easily accessible through featherlight's CSS? I admit I have not looked into it yet. Another option could be showing a "Drag and left or right to view more images" notice on mobile or something. Like right below the image.

[marcandre]

We don't generate the navigation buttons at all on mobile, but I guess we could and hide them, so you could override the CSS if you want.

[mooreofambie]

The mobile view is so frustrating so far. I used my own work around to hide the default navigation and implemented my own/simpler prev/next arrows using a background image for featherlight-next and -previous. So I'd like to have them display all the time on mobile, especially since swipe won't work on my site right now.

The fixes I've tried in featherlight.gallery.css won't allow me to do this even with a display block(below), do you have any recommendations? I'm wondering if the problem is how I implemented my custom arrows, which would suck since it looks great on desktop, haha.

/* Always display arrows on touch devices */
@media only screen and (max-device-width: 1024px){

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

[maxfrigge]

I have a case were I need to display the navigation buttons on mobile too. I think this is an implementation detail and should not be dictated by the plugin.

In order to not break any current implementations it would probably be best to leave the default as is and add an option to override this feature.

Would you mind adding this or point me to the right direction so I can create a pull request?

[marcandre]

I think the best solution is probably to add a class to featherlight called 'featherlight-touch-enabled', and rely on this to hide the buttons in the default css, so maybe no option per say? Any better suggestions?

[maxfrigge]

@marcandre Im fine with that too. Was just thinking about compatibility when people upgrade the lib. But it shouldn't cause any pain when upgrading the default styles too - right?

[marcandre]

@maxfrigge Indeed. I'd mention in the Changelog that there was also a change in the CSS

[maxfrigge]

@marcandre Sounds great! Let's do this :)

Let me know if there is anything I can contribute.

[marcandre]

@maxfrigge You can try implementing it and creating a PR if you want

[craiglockhart81]

Hi,

I found that if you use the beforeOpen you can append the arrows onto the gallery.

Example below:

$('a.gallery').featherlightGallery({ previousIcon: 'Previous', nextIcon: 'Next', gallery: { fadeIn: 300, fadeOut: 300 }, beforeOpen: function(event){ var self = this; self.$instance.find('.'+self.namespace+'-content') .append(self.createNavigation('previous')) .append(self.createNavigation('next')); }, openSpeed: 300, closeSpeed: 300 });

[madmax2000]

Thanks a lot! beforeOpen works just fine :)