Lightbox: mouseIn / mouseOut

Ask the community
, ,
1

I’m trying to trigger a lightbox to pop up when people hover a mouse over my forum. Then when people hover away, it disappears (it acts as a quick menu if people want to use it - similar to a floating button)

I’ve managed to get the hover over (MouseIn) to work fine on desktop. However, when I added the (MouseOut) nothing seemed to work (neither worked on mobile)

Here’s what I’ve got:

pageApp1 - Is the Wix Forum APP
‘Floating Button’ - Is my Lightbox which looks like a button

import window from 'wix-window';

export function pageApp1_mouseIn(event, $w) {
  window.openLightbox('FloatingButton');
}

export function pageApp1_mouseOut(event, $w) {
  window.closeLightbox('FloatingButton');
}

I would primarily want it to work when I’m scrolling through the mobile version of the WIX Forum APP (a lightbox is the only element I’ve found which will sit ontop of the WIX Forum App).

Should the mouseIn work if I am scrolling / applying pressure on the screen on mobile?

If not; is there an ‘active/when scrolling’ function for mobile & desktop versions instead (probably would be more accurate to what I’m trying to achieve?) or something similar which will work on mobile devices E.g:

export function pageApp1_scroll(event, $w) {
  window.openLightbox('FloatingButton');
}

Many Thanks

Thomas

2

Hi Thomas,
Two things:

  1. There is no ‘window.closeLightbox’. There can only be one lightbox open so see this .
  2. There’s not much of a ‘mouse over’ meaning on mobile since there’s no mouse or pointer.
    How about using onViewportEnter and onViewportLeave for what you need?

Liran.

3

Hi Liran

Thanks for the reply.

It seems that on the mobile the WIX Forum APP is fixed and doesn’t register the onViewportEnter;

I tried two things:

  1. I tried to fix the code to the onViewportEnter directly on the WIX Forum APP. This worked on the desktop as you can scroll into the APP on the screen, but not the mobile. It popped up when I entered anywhere on the screen associated with the APP (on desktop).
import window from 'wix-window'; 

export function pageApp1_viewportEnter(event, $w) {   
window.openLightbox('FloatingButton'); 
}
  1. I then tried adding it to an anchor instead, but again this had a similar issue on mobile as you can’t scroll into view, the APP is just fixed. This however worked better on desktop as I placed the anchor at the top and it was only triggered when I scrolled back to the top.
import window from 'wix-window';

export function anchor4_viewportEnter(event, $w) {
  window.openLightbox('FloatingButton');
}
  1. So I then tried to add it to an ‘onClick’ event on the APP. but the function wasn’t available?

import window from 'wix-window';
export function pageApp1_onClick(event, $w) {
  window.openLightbox('Quick Menu');
}

My alternative could be to call the lightbox on all pages in the forum automatically to show the lightbox, then fadeout/close after 1000ms? This way it wouldn’t intrude on the user experience too much.

Can I use specific URL’s to trigger a Light box or have it triggered on all URL page changes? Also, how would I do this?

The pages on the WIX Forum APP are not ‘official pages’ so they don’t trigger the lightbox when I move to a different category page.

4

Hi,

You can open the light box whenever you enter any forum page but you can’t open the light box when you navigate inside the forum pages.
You can do that using wixLocation.path , if the path contains “forum” open the light box.

Good luck

5

Hi Or,

I’ve given this a little go and I keep coming up stumped. Any chance you could have a look and see where I’m going wrong? I’ve tried adding it to the page and to the site.

  • My forum is on my Home page so the pre-fix would be ’ forum '.

  • The title of the forum is ’ packerpal '.

  • My lightbox is called ’ Quick Menu '.

import wixLocation from 'wix-location';

import window from 'wix-window';
  window.openLightbox('Quick Menu');
let prefix = wixLocation.prefix('packerpal'); // "packerpal"

I’m also trying to automatically close the lightbox after 1500ms as well.

How would I add that in there? I’ve tried adding this but it’s not too happy:

setTimeout(() => {
window.openLightbox('Quick Menu').hide('FadeOut');
}, 1500);

All the best

Thomas

6

Hi Thomas,

wixLocation.prefix will only work for dynamic or router pages, for other pages it will resolve to undefined.
Use wixLocation.path instead:

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

$w.onReady(function () {
	if (wixLocation.path == 'forum') {
		wixWindow.openLightbox('Quick Menu');
	}
});

Place this code inside your lightbox page to close it after 1500 milliseconds.

import wixWindow from 'wix-window';
$w.onReady(function () {
	setTimeout(function(){
		wixWindow.lightbox.close();
	}, 1500);
});
7

Thanks for the response, Ido

I’ve managed to get the latter working (the close the lightbox code) but I can’t for the life of me get the wixLocation.path to work.

I’ve tried different variations of what you have sent across to no avail. I’ve tried it:

  • with / without ‘display on all pages’ checked on the lightbox itself

  • on the forum pages ‘page / site’ code

  • on the lightbox’ page ‘page / site’ code

  • with ‘forum’ and ‘packerpal’ as the path

This is the path of my site on the forum home page (my forum home page is my site home page):

https://www.packerpal.com (when you first open the website)
https://www.packerpal.com/packerpal/ (after you click on a category and click back to the forum home)

I just can’t seem to get it working. I don’t suppose you would know why it may not be?

Kind regards

Thomas

8

Just giving this a nudge so it jumps back up the list.

Best

Thomas