Please advice very much: for many reasons I need to have two independent instances of Limelight on one page. So I have Limelight ID = A (in which Unique ID photos = a1, a2, a3, etc. are embedded). And I have a second Limelight ID = B (in which Unique ID photos = b1, b2, b3, etc. are embedded). Both Limelights have “close other limelights when open” set to on. Limelight ID = A, photo Unique ID = 1a (“Open on page load” = on) is the first to open when the page is loaded.
Everything works as it should.
But now I need to have ONLY ONE button (or one link) on the page that will switch me between these Limelight IDs A / B. I don’t know how to do it…
Two buttons is fine, but I need to have only ONE.
So when the page starts, I have Limelight ID = A running and I’m viewing photos (a1, a2…). Somewhere on the page I need to have a button which, when pressed, will open Limelight ID = B (Limelight ID = B will therefore close) and I will view other photos (b1, b2…). After pressing the button again, I’m back to Limelight ID = A.
Can someone please tell me how to set such a button??? Thanks so much for any advice!
Buttons, launchers and anything else that open Limelight Content work by having the class name of the content ID on them. They are unrelated to the Limelight ID.
To do what you want is going to require some javascript on the button so that it toggles between opening your second content and then closing it again.
There are a few ways to do this but probably the simplest method would be to create two buttons - one that opens the 2nd content (lets call it Button2) and one that opens the 1st content (Button1). What we don’t want to do is to start changing the class names via JS as it will break the event bindings.
We start with Button1 hidden and Button2 showing. When clicked and the second limelight opens then we hide Button2 and show Button1. The process then just continues ad infinitum in a toggle manner.
I can sort this out for you if you just email me a very simple project file with your button launcher in it. I just need to know where it is and how your layout works so that I can write some simple JS for you. I don’t need a complicated page or lots of limelights. Send it to the bwd support email if you don’t mind. Thanks.
Thank you very much for your quick response and effort to help!
I have already sent my test project to the support address. THANK YOU!
I will sort it out this evening
Thank you very much!
I realized that I could probably do without one toggle button - but I would have to somehow make the close icon in Limelight ID = B also have the open function in Limelight ID = A.
Thank you very much for the elegant solution - it works!
But there is one bug: when navigation is set in Limelight (a/b) with browsing “Loop back to start” and I start browsing Limelight and again from the first photo in the sequence = the buttons change automatically without me clicking on them!
I need “Limelight A” to show the “Open b1” button all the time (and vice versa). Thank you for your help!
So unfortunately: even if the navigation is set to “Don’t loop” the buttons change by themselves when clicking on the arrows - every time I reach the last photo “Limelight A” and start going back to the first photo = the “Open b1” button completely illogically it changes to “Open a1” even though I haven’t clicked on anything and I’m still in “Limelight A”…
I know why that is happening, it’s because the navigation buttons trigger a click on the class names of the slides. This is getting picked up by our new buttons.
I should be able to fix that with a check to see if the mouse is over the button before executing the toggle - this will effectively check for a real click rather than the generated one.
I’m at my in-laws house cutting down trees today so it will be tomorrow before I can do it but it shouldn’t take long.
There might be another way to do this, if I understand your needs correctly. It’s not as elegant as Tav’s, it’s a hack, but it works. I do something similar here…
On the left of the scrolling images you’ll see a little bit of info and a button “Map”. Click it, and the text is replaced with a map, with a button that says “Details.” The text and map are two Limelights.
This is done with two buttons, but the active button is set to transparent, so it’s invisible. It’s not precisely what you are wanting, but it’s an option. Assuming I’ve understood your needs correctly.
@TemplateRepo Nice solution using the nav bar stack.
If you want it to stop jumping around then just add this. It makes it a bit more polished than the transparent approach and makes it look more like a toggle button.
.pc-filter-links .pc-button.lightbox-open{
display: none;
}
Thank you very much for your help - I was trying to solve this in a similar way. But in the end tav helped me = he did it absolutely elegantly and everything works great!!! Thanks!