This is what I would do personally (note: I have not specifically tested any of this code, I have presented it purely as ideas and methods of coding):
If I'm reading this correctly, the best way IMO is to use a variable array ($v[0,1,2]) for most things instead of separate variables ($v1, $v2, $v3). Also, this would make calling the images separately easy, and you wouldn't have to "hide" them after loading them unnecessarily.
Then you can use something like
<<set $skin=2>>
<<set $underwear=[3,4]>>/*Array has the bra first, then the pants/panties*/
<<set $accessories=[5,6,7]>>
/*
The above is for testing this page, otherwise you should set them on the previous page.
You can make a test page for now to see if this works for you.
*/
<div id="scene">
<<set _src="images/skin"+$skin+".png">>/*_src = "images/skin2.png"*/
<img class="skin" src="_src">
<<set _src="images/bra"+$underwear[0]+".png">>/*_src = "images/bra3.png"*/
<img class="underwear" src="_src">
<<set _src="images/underpants"+$underwear[1]+".png">>/*_src = "images/underpants4.png"*/
<img class="underwear" src="_src">
<<for _accessory range $accessories>>
<<set _src="images/accessory"+_accessory+".png">>/*_src = "images/accessory5/6/7.png"*/
<img class="accessory" src="_src">
<</for>>
</div>
It's possible (again, I haven't tried the code yet) you may need to put a "capture" around the accessory part:
<<for _accessory range $accessories>>
<<capture _accessory>>
<<set _src="images/accessory"+_accessory+".png">>/*_src = "images/accessory5/6/7.png"*/
<img class="accessory" src="_src">
<</capture>>
<</for>>
You could then replace the CSS with something like
#scene {
position: relative;
display:block;
width:100%;
height:400px;
}
#scene img{
position:absolute;
}
#scene .background{
z-index:5;
}
#scene .skin{
z-index:10;
}
#scene .underwear{
z-index:20;
}
#scene .accessory{
z-index:30;
}
This assumes ALL of your images have a transparent background (except the background image, if you desire to have one).
ALTERNATIVELY (to answer your actual question):
The reason you had to include those in a button is because you have to call it AFTER the page has loaded, otherwise I believe the <<script>> stuff runs first, then it defaults back to hidden.
So you'll have to use the Passage Events for after the page has displayed:
<<script>>
$(document).on(':passagedisplay',function(ev){
if(State.variables.v1 == true){
$('#scene .layer1').show();
}
if(State.variables.v2 == true){
$('#scene .layer2').show();
}
});
<</script>>
The reason you have to use the "State.variables" to access variables is because the <<script>> tag runs as raw javascript, not including shortened SugarCube variable names. This uses the State API (a sort of included shortcut/variable it seems) as shown to me by @greyelf (thank you).