How to trigger two limelights with the Limelight bar

1

I’m not a pro and the more I learn about the BWD stacks, the most amazed I am!
Just found here the answer to one of my questions regarding triggering two limelights with one button.

Now, would there be a way to do the same thing with the Limelight bar? I’d like each button to open the main limelight content which are blogs grouped in different tabs, but also a little limelight in a different Section Pro stack, which acts like a small menu that serves each tab (like the Magellan Magic Dots which I’ve recreated). The option ‘open on page load’ isn’t good, as I need the click to trigger the small menu.

If it’s not possible, I always have the option to use buttons to mimic and replace the Limelight bar to achieve the same thing.

2

The Limelight Bar gets generated from the Limelight content stacks that you have on the page and so it is a one - for - one relationship I’m afraid.

Yes, this is what you will need to do unless you.

3

Actually, I take back what I said… when there is only one Limelight content class in the custom class, it works, but when I write two names only one gets triggered. It’s always the same one, as if it had priority, and it doesn’t matter in which order I write them. As if it goes for the first one it can find on the page, and that’s it. Any ideas? I really need to trigger two limelights with one button.

4

Are you talking about two different limelight contents or have you got multiple limelight stacks on the page each with a content stack in there? I’m presuming the former as the bar that you tried is tied to one particular limelight.

It is possible to open a second LL content when the first opens using javascript (there are trigger classes shown in edit mode that show the events that fire when a limelight opens), it is also possible to open two independently by writing your own click handler for a button. The automatic set-up the stack does will not work because it finds a class name and binds an open event to that element. I suspect that the second class name that it finds will be the one that gets used.

Neither of the two above options are trivial though and will require a hidden element on the page to which the click handlers are connected.

Obviously, a lightbox is usually a modal event and even in my wildest dreams I didn’t anticipate people needing to open two from a single trigger :) I’m sure we can work something out but I’d need to see more of the actual setup and also be sure that there is not a better way of doing it for you.

5

Thanks for your reply. Yes that’s far beyond my remit. I’ll have to leave that to a pro, when I get one on board.

I managed to get my little dots menu to appear inside the blogs limelight, but the stickiness is mega flaky (whether using Chroma or Stick). The sticky behaviour is far more stable when in a section pro somewhere else on the page.

6

… also I find it harder to define an active state using buttons, when it’s automatic with the Limelight bar.

7

The limelight launcher stack handles this for you if you use buttons or links but obviously only one will open at a a time

8

I can help you sort it but as above - I need to see exactly what you’re trying to do. A very simple project file would help but make it super basic with just the relevant limelight’s and a description of exactly what you want it to do.
You can email me on the BWD support email.

9

But you loose the hover effect don’t you… unless you switch it on bu then the action is gone.

10

Anything that you launch a limelight from is given a class of lightbox-open when the associated limelight is open. In very simple terms, if you give your button a custom CSS class of my-button in the stack settings then the following would make the text yellow when its limelight was open.

Given that I don’t know what theme/framework you are using its hard to be more specific at this point but if you email me the full details it will be easy to sort it out for you.

.my-button.lighbox-open{
  color: yellow
}
11

I’ve DM’d you a little example project

12

Thanks, it’s been so helpful! I managed to create three buttons with the double triggers thanks to your few lines of code.

The thing I can’t get working is the lightbox-open css. No color change I can see.

13

I’ve sent you more of an explanation via the support email and a modified version of your project but it looks like you just need an !important on the css to make it work. So for example the middle button:

.lightdotsT.lightbox-open{
    background:red!important;
    color:yellow!important
}