Transcript

00:10 hi it's Rob from Joe workmen stacks and
00:13 today I'm going to show you how to set
00:14 up a peekaboo stack so I have a basic
00:18 web page here's some text and image and
00:20 some text and I want to have an area
00:23 underneath this image pop-up open with a
00:25 peekaboo stack kind of like the way
00:27 Joe's website does a lot of demos so
00:30 what we're gonna do here is first find
00:32 the peekaboo stack and there's -
00:36 peekaboo stacks there's a peekaboo and
00:38 the peekaboo launcher and we're just
00:40 gonna put the peekaboo stack in first
00:42 and that does that it leaves a little
00:46 drop area that you can put your content
00:47 you can put any kind of content and you
00:49 in there you want let's put a responsive
00:52 two column stack in there and I'm gonna
00:56 copy this image there and I'm gonna copy
01:00 this text so now the peekaboo stack will
01:05 pop open when you click on something we
01:07 have to set that up yet but I want to
01:10 show you what it looks like so here it
01:13 is with the ambience theme there's the
01:17 text the image and the text and you do
01:19 not see the two column stack with the
01:21 image at all only if you are in edit
01:23 mode that's in the peekaboo stack so
01:26 let's add a launcher now you can do this
01:29 a couple of different ways the first way
01:32 is to do a very simple way is the
01:34 peekaboo launcher stack you can put that
01:37 anywhere as long as it's not in the
01:38 peekaboo stack I'm gonna put it above
01:40 the peekaboo stack and then I'm just
01:43 gonna grab you can use anything to
01:46 launch in there you can put a picture
01:47 you could put text anything will launch
01:49 it but I am going to grab just the basic
01:55 if you don't have any other kind of
01:56 button the basic button to come for
01:58 stacks and I'm going to open says me
02:08 spoiling that word I'm not too great a
02:10 spell to work but so but missus open
02:13 says me now you need to look at a couple
02:15 of things a peekaboo launcher as a
02:18 launch ready okay and peekaboo as a
02:20 launcher I
02:22 you have to make sure those two are the
02:24 same and they are right now so if we
02:27 preview the sack we will see our button
02:34 underneath and we click on this and it
02:37 pops down a two column stack with the
02:40 image in it you will notice that if I
02:42 resize it a whole bunch you can resize
02:45 it and it is responsive click on that
02:48 button and it goes away so it's a very
02:52 cool way to do it now there's another
02:55 way to do it so let's get into that I'll
02:59 take the button outside of the peekaboo
03:01 launcher and you click on it and you
03:05 need to set a link now first thing you
03:08 might want to set a link to is set this
03:11 to JavaScript : void
03:22 okay so you've set the URL to
03:24 void 0 now the next thing we
03:27 need to do is look on Joe's docs page
03:31 and look at the basic setup and you'll
03:34 notice you have to add two custom
03:35 attributes and one of them is a class
03:38 with peekaboo and a data
03:41 - PAB which just stands for peekaboo
03:43 demo okay
03:45 so let's add those now we have a class
03:47 of peek name of data PAB now this is
04:00 gonna be it says demo in here but that's
04:03 gonna be actually your launch ID so
04:08 let's go back and look at that in
04:09 peekaboo launch ID is peekaboo I'm gonna
04:11 actually copy that out go back to the
04:15 button go back to the link put that in
04:18 the value for the PAB paste it in click
04:23 set link and now this should work with
04:28 the button that's not inside the
04:31 peekaboo launcher so you can do it one
04:34 of two ways use a peekaboo launch or a
04:36 very simple way if you don't want to use
04:38 - peekaboo launcher you can set up
04:39 anything not just a button but you can
04:41 set up a link and let's do that - let's
04:43 add a link to this text down here create
04:48 a link to it again URL type in
04:51 JavaScript colon void 0 about class of
05:01 peekaboo and have another attribute data
05:10 PAB also my name's peekaboo member
05:14 that's the launched IV which I kept head
05:17 peekaboo let's preview this now now we
05:21 have a button here that will open and
05:24 close it and we also it was kind of hard
05:26 to see it's this white word down here
05:28 but that also opens and closes it okay
05:33 so that's the basic
05:35 setup peekaboo snack I hope you've
05:38 enjoyed this go forth and make your
05:41 websites great thanks
05:44 you
05:46 "}]