Copy link to clipboard
Copied
In my first foray into using Muse I have created a static website that includes six, squarish State Buttons laid out in a 2 x 3 panel. Inside each State Button is a <grouped> image and text box. My intention is to maintain the State feature of those grouped items, while using the State Button as a Trigger for a Lightbox that will have amplifying text. The lightbox has a Close button to hide the Lightbox allowing the User to "return" to the page with the six State Buttons.
My feeble Muse-ings have consisted of resizing and placing a similarly-sized transparent Trigger from the Lightbox on top of each of the State Buttons and stacking the layers to ensure the Triggers are on top. Of course, the Muse Gods will laugh at my attempt because that nullified the State Button feature as the State Button has the transparent Trigger box over and never "senses" the input from the User. Alas... What to do?
My questions:
My efforts have failed thus far proving I am a mere mortal Muse-ling.
Many thanks to Ussnorway​ who provided me with the insight in the video above to create the effect I wanted.
Basically, the layers and the correct use of nesting is essential to get the effect I wanted.
To create the effect:
See the structure below.
The res
...Copy link to clipboard
Copied
1 yes you can have a state button turn a lightbox on by just placing the lightbox inside the state button
2 I'm not sure what you want here but you could have a state button with different states as a trigger yes
example demo = lightbox
the accordion and basic com-widget allow you to see how a state button is different... there IS a second state button beside these that only shows on mouse over state i.e, is hidden
Copy link to clipboard
Copied
Thank you for your guidance, Ussnorway​.
I was able to drop and drag a lightbox in to the state button, but I am still a little confused on what to do with the Trigger box? Do you have any guidance on what order the layers should be in, and the size of the Trigger box?
Thank you.
Copy link to clipboard
Copied
every design is different but as a basic rules;
if you still have problems,
I recommend you make a simple .muse file with just the state button and lightbox as two parts then share that from Adobe CC or a dropbox so we can see what you want to make... if it can be done then one of the guys here will quickly put it together for you and if not then perhaps we can suggest a different fix but we would need the files
Copy link to clipboard
Copied
I believe you have addressed my concern with the following: "layers are not generally an issue because the lightbox | state button are seen as one". Thank you.
Copy link to clipboard
Copied
Good day, Ussnorway​
I am at a bit of a loss. I added the The order and Status Buttons are now not working as expected after adding a Lightbox into the State Button.
Here is a lean example of what I am trying to do.
Please let me know what I have done wrong.
Thank you.
Copy link to clipboard
Copied
Please let me know what I have done wrong.
a lot of simple mistakes that add up;
I made you an example page of your design... one is inside a state button and one isn't so please have a look and consider if you do in fact want a state button
example page = state-lightbox
p.s, setting the svg image to none will make building this design much easyier but another trick is to hide the lightbox while fitting it to your state button
Copy link to clipboard
Copied
Good day and thank you, Ussnorway​.
A few points of clarification to make sure I am following you:
- In the example page state-lightbox the two icons do no change state upon Mouse Over. That is the same situation I had in an earlier version of the page and I have not been able to figure that out still.
- Additionally, although the elements inside the Group (e.g., the image you have selected in your screenshot) do not have states, the Group as a whole (image plus text box) do have different states that change upon Mouse Over. To be clear, I applied the different states to the State Button (with the grouped image and text box inserted inside the State Button) instead of assigning states to individual elements.
The other tips are appreciated.
Thank you,
C.P.
Copy link to clipboard
Copied
charliepapasierra wrote
To be clear, I applied the different states to the State Button (with the grouped image and text box inserted inside the State Button) instead of assigning states to individual elements.
to be clear, your design does NOT need state buttons... have a look at this lightbox (I added it to the cc lib for you to play with as well)
charliepapasierra wrote
Basically, the layers and the correct use of nesting is essential to get the effect I wanted.
well done!
Copy link to clipboard
Copied
charliepapasierra wrote
I am at a bit of a loss. I added the The order and Status Buttons are now not working as expected after adding a Lightbox into the State Button.
I had another look at home and imo you are prob getting mixed up by putting too much on your canvas at once... I try to break complex designs down to their base parts and work on them one at a time.
anyway here are your .muse file back and cc lib working out
Copy link to clipboard
Copied
Good day, Ussnorway​
I saw you "Pasted in place" the image and text into the Trigger. I will try Pasting in Place the State Button and see if that works.
Thank you,
C.P.
Copy link to clipboard
Copied
Many thanks to Ussnorway​ who provided me with the insight in the video above to create the effect I wanted.
Basically, the layers and the correct use of nesting is essential to get the effect I wanted.
To create the effect:
See the structure below.
The result is a State Button that opens a Lightbox.
I am not sure if I created the equivalent of Rube Goldberg code, but I like the effect.