Transcript

00:08 hi it's Rob from Joel workman stats
00:11 today I'm going to show you how to use
00:13 an expose stack to open up a lightbox
00:16 using a text link so you'll see I have a
00:19 web page here that's got some text in it
00:22 and an html5 audio stack and instead of
00:25 having it this stack here on the web
00:26 page I want to put it into a lightbox so
00:29 Joe's got a great stack for that it's
00:31 called expose I'm going to drop that on
00:33 to my page and then there's two parts to
00:37 the expose stack a launcher and a
00:39 lightbox and we want the audio staff to
00:41 open up in the lightbox will drop it in
00:44 there now there's some changes we can
00:46 make to this to make it look a little
00:47 bit nicer you can add a background color
00:50 to the lightbox and let's do that so
00:54 we'll change a color and we'll make it
00:57 this nice purple and you can also change
01:01 the overlay color and what the overlay
01:02 color is is when the light box pops up
01:06 it covers the backbone of your webpage
01:08 so let's try to find a matching color to
01:12 that and let's make it a dark purple
01:15 okay now you can also turn off the
01:21 launcher now the launcher you could put
01:22 a button into or you could even put the
01:24 text stack in too and launch it but
01:26 since we're going to be using text we're
01:28 gonna turn off the launcher so we come
01:30 down to the expose advanced settings and
01:33 click on hide launcher and it disappears
01:36 now we have one more thing to change
01:40 you'll notice that underneath the
01:43 lightbox it gives you a hint says hint
01:45 to launch expose from external links
01:47 simply add class blah blah blah or by
01:50 adding poem stacks to the end of the URL
01:52 and that's a lot stacks the stacks pro
01:56 plugin automatically gives the stack an
01:59 ID when you put it on the page every
02:01 time you put on it it's gonna change we
02:03 want to give it our own ID because this
02:05 is just too much stuff to remember okay
02:08 so you also do that in the Advanced
02:10 Settings and we're going to give it
02:13 an ID of song now Oh
02:19 return sorry now you'll notice in the
02:22 hint it changes from class whatever it
02:26 was to expose a song and then the pound
02:28 song for the URL okay well me though is
02:32 to help set the link up another thing
02:36 that happens is when you open up expose
02:39 if you have autoplay checked and it's a
02:41 media thing like audio or video it'll
02:43 automatically play that unless you
02:45 uncheck that that setting is also in the
02:47 html5 audio stack but I believe that's
02:50 unchecked autoplay is unchecked yep
02:53 so I I don't want it playing right away
02:56 I want to let the person push play but
02:58 that's up to you so another we have this
03:00 set up expose is all ready to go let's
03:03 link to it so I'm gonna click in here
03:05 the text deck and highlight some text to
03:09 link to and I'm gonna click on the plus
03:12 button and up pops my link box okay now
03:17 if you remember down here it says for
03:19 the URL we have to add pollen song to it
03:21 so I want to put pound song return
03:25 well didn't want to hit return there
03:27 sorry let's go back to the link because
03:29 we have to add one more thing and you'll
03:31 notice down here it says we have to add
03:33 a class of expose underscore song so we
03:36 click the plus button and we change the
03:39 the key the name of it which is key to
03:42 class and then the value is expose
03:47 underscore song now we're not using the
03:51 quotes in the link box here because
03:53 rapid even will do that for you if
03:56 you're using pure HTML if you're typing
03:58 in HTML you would want to use the quotes
04:01 there but since we are using rapid
04:04 Weavers link we don't need to do that
04:06 click on set link you'll notice that the
04:09 color of the text changes to a link
04:13 color and now we're ready to preview it
04:16 so let's do that let's preview up pops
04:21 our web page very nice looking web page
04:23 and it's got our link in it right here
04:25 so let's click on it
04:27 and you'll notice I changed the
04:29 background this is the overlay to that
04:31 dark and the background color of the
04:33 audio player is a light purple okay
04:36 all I have to do is click on the play
04:37 button and the music starts playing push
04:42 stop and I stop it now I'm gonna play it
04:44 here in a second again and show you what
04:47 happens when you close the lightbox when
04:55 I close the lightbox you'll notice the
04:56 music stops playing that's a feature
04:59 that Joel put in so the people won't
05:01 have to open up the lightbox again and
05:03 stop it from playing now one thing else
05:06 that he added to the stack if I click
05:09 the link again wow it's left off and
05:12 that's actually not part of the expose
05:13 this is part of the HTML stack but I
05:17 thought I'd show it to you if you
05:18 stopped right where I stopped playing it
05:20 put on some second six so let's I know
05:29 it's on eleven let's close it and see if
05:31 it keeps keeping track of it for us
05:33 there at that 11 still so that's a nice
05:37 feature in the html5 audio stack well
05:40 that's the how you make a text link with
05:44 expose in the lightbox I hope you've
05:46 enjoyed this FAQ please look for more
05:51 facts and stuff on our Doc's page at
05:53 Doc's Joel workman net and happy weaving
05:58 "}]