0:00 [Music]
0:06 launching a limelight is easy you just
0:09 use the launch ID which is specified for
0:13 each light box that you add and it's got
0:15 to be different for each one as a custom
0:18 class if you don't want to use custom
0:20 classes you can use the convenient
0:22 launcher stack and anything you drop in
0:25 here will launch the lightbox it
0:28 defaults to lightbox one so for our
0:30 first one we don't need to set anything
0:32 at all and there we go if we want to
0:39 button in there instead of a header we
0:42 could drop any button you like it
0:44 doesn't matter and we click preview and
0:48 now our button launches our limelight if
0:53 you don't want to use the launcher and
0:55 you want to use custom classes you just
0:59 use this lightbox one or whatever you've
1:01 changed it to there's a custom class on
1:04 anything you like so this button will
1:06 still launch it now but without the
1:08 launcher stack and of course you can put
1:12 the custom class in text as well if you
1:15 want so let's add a piece of stacks text
1:20 and just create a link then we're going
1:26 to add class and our class is going to
1:31 be lightbox one again our launch ID and
1:35 we just need to add a hash into the URL
1:39 so let's now preview that
1:43 and there we have it the lightbox from a
1:46 linking text lime line looks great out
1:50 of the box here's one we've just dropped
1:52 onto the page put a couple of images and
1:54 a video into and some little care that
1:57 looks will get a nice fade in I've got
2:01 our background and we've got beautifully
2:04 styled SVG icons for our clothes and our
2:08 navigation between different Limelight's
2:11 these SVG's are very customizable and
2:15 you've got lots of styling and they're
2:17 particularly helpful for people who
2:19 suffer an adverse reaction to font
2:20 awesome and down here in the settings
2:28 you'll see we've got lots of options for
2:31 the clothes gadget looking of it as text
2:34 if we want it like on we've got lots of
2:37 different types we've got cross more
2:39 cross a back arrow which is useful in
2:42 some circumstances and even a hamburger
2:44 you can change the colors of the Phil
2:50 the ring the icon and the background to
2:53 fill in an entire area of the icon
2:57 you've got full control over everything
3:00 rounded corners and you can also change
3:04 the alignment for every limelight in
3:09 this group every limelight light box or
3:12 you can then go into individual light
3:14 boxes and you'll see you can change the
3:17 position for that individual one
3:19 depending on the content type you may
3:21 want to avoid certain contents with your
3:23 closed cross and if you want to change
3:25 the navigation arrows then you just
3:28 click onto the navigation Styles button
3:30 down here and you've got similar
3:32 controls for those arrows there and the
3:34 position and the speed of the animation
3:39 back to the main stack we can have a
3:43 background that is a simple color or we
3:47 can tell it to use a child stack a
3:49 background child from pro stores in
3:52 which case we can use gradients images
3:55 and
3:56 can you light that's you can tell all
3:58 the other backgrounds
4:03 the multimap feature is a convenient way
4:06 to add several maps of your locations or
4:11 venues for events by only using one
4:14 Google Maps lightbox child stacking
4:17 limelight so first thing to do is change
4:20 the source from Google map to multiple
4:22 google map and you'll realize you'll see
4:24 that we lose the ability to type in the
4:27 address here because he tells us to use
4:31 the launcher so let's use a launcher and
4:35 in there we'll put a bit of text and
4:36 we'll just say send Paul's Cathedral I'm
4:44 just gonna copy that and then in our
4:47 launcher settings instead of the action
4:50 being open limelight content we're gonna
4:52 say multi map and the map reference well
4:57 we can put addresses into google map so
4:59 let's just try some Paul's Cathedral
5:01 make life simple for ourselves and it's
5:05 going to open lightbox one like the
5:08 launchers defaults the lightbox one and
5:13 there we go some Paul's Cathedral great
5:15 that's no different to a normal line
5:18 light map at the moment but now what we
5:21 can do is we can we could add another
5:24 one but we could just duplicate this one
5:26 and we could say that we want this one
5:29 to be we'll stick with the suit
5:38 and we'll go for some Pancras station
5:46 okay let's try that
5:51 and then we've got some Pancras station
5:54 and we go back to that one and we've got
5:57 some Paul's Cathedral so it's very very
6:01 simple to use and the main application
6:06 as I say would be if you had venues for
6:10 events or multiple addresses for your
6:12 businesses and you might want to do it
6:15 something like this so you've got a two
6:17 column will give this section an ID of
6:20 maps copy that and we this time we'll
6:26 say that we want this limelight to
6:28 appear in that
6:29 so we'll say section is pro and we're
6:31 gonna team map sec we're going to scale
6:35 the whole stack to the content because
6:37 there's nothing in it at the moment so
6:39 that will stretch the section and we'll
6:42 just put our launchers in the left-hand
6:45 column okay so let's see what we've got
6:50 now the left-hand column and the map is
6:57 in the right-hand column and now of
6:58 course we can click on the different
7:01 ones okay so it would probably be nicer
7:06 if we set this up a bit more and padded
7:09 it out and move the text around and so
7:11 on and so forth and don't forget you've
7:13 got the controls in the launch of stack
7:15 week and dim when it's open or styling
7:20 change the color of the link for
7:22 instance when it when it's open and so
7:24 on just to make it a bit more
7:25 user-friendly
7:29 Lomo it makes it easy to manage edit
7:32 mode with its content here we've got two
7:34 lime lights on a page one with a green
7:36 background and a couple of maps in it
7:38 and one with a off black background with
7:41 various different types of content light
7:44 boxes first thing we can do is we can
7:49 collapse the child light boxes now when
7:52 you've only got maps in there which
7:54 don't take up much room anyway we click
7:56 and collapse all child light boxes it
7:58 saves a bit of space so that's on and
8:00 that's collapsed but where it really
8:03 comes into its own is when we've got the
8:05 like Stax content and images something
8:07 large heart tall content so here we can
8:11 now collapse all that child light boxes
8:13 and we've got a massive space-saving we
8:16 can still see what's in each one it's an
8:18 image warehouse and it's IDs light box
8:21 three so on and so forth but it makes it
8:25 a lot easier to manage and then whenever
8:28 we want to change anything
8:29 we can either just select it like that
8:31 and we can still change settings or if
8:33 we need to see what's going on then we
8:35 can go back to the limelight stack and
8:37 just turn off the collapse the other
8:40 thing I should say with the limelight
8:43 image child is that if you turn on lazy
8:48 preload which is on by default and he's
8:53 recommended that you use anyway because
8:55 it will increase your page loading time
8:57 speed decrease the time turn that on you
9:02 won't see the image anyway it will just
9:04 give you the link to the image so
9:08 normally you won't see those images in
9:11 edit mode couple of other features we
9:16 can show the trigger classes in edit
9:17 mode now these are really for advanced
9:21 users and for very advanced users we've
9:24 got the events but let's just have a
9:26 quick look at the trigger classes the
9:30 limelight - closed class will close all
9:34 light boxes in that limelight
9:37 now you think well why might there be
9:39 more than one open it's a it's a light
9:42 box you only have one open well if it's
9:43 open in a section then you can't have
9:46 more than one open at a time it's lime
9:52 light one clothes because idea of this
9:56 lime light is lime light one so this is
9:58 the idea of the main stake now this is
10:00 only used for these trigger classes and
10:02 to associate it with a lime light bar
10:04 stack so if we were to change this to my
10:09 lime light
10:12 then the trivia class here becomes my
10:15 limelight closed closed so anything with
10:19 that class will close all the lime
10:20 lights in that light box closed
10:25 individual ones we use the launch ID so
10:28 this will be map 1 - close this will be
10:30 map - - close if you want to close all
10:34 on a page
10:35 it's just give something a class of
10:36 limelight close all and finally we've
10:40 got some events for super events users
10:43 that are exposed on the window the
10:47 report when a users close the limelight
10:50 so that's when it's been closed by one
10:54 of these classes on a on a button or
10:57 another element when it's been opened
10:59 and it also gives details here of how
11:02 you would return the unique ID of that
11:04 particular light box through the
11:06 instance unique ID method so that's
11:10 enough of the the trigger classes now
11:14 usually you'll never ever need those one
11:17 last thing that we'll talk about about
11:19 edit mode is this setting here that says
11:24 show Navin Anya's child Stax now you'll
11:26 notice the navigation settings and the
11:28 animation settings are on these
11:30 parenting buttons at the bottom here the
11:33 navigation is off at the moment it needs
11:36 to be turned on in the stack before that
11:38 button becomes active so when we turn on
11:40 navigate between contents we can now
11:42 click on this and we get our navigation
11:45 Styles the more observant amongst you
11:48 may have realized that these are
11:49 actually just child stacks which is how
11:51 the settings are separate on the on the
11:55 settings panel now the clothes cross is
12:01 hidden so you shouldn't be able to close
12:03 them but if by any chance you click hit
12:07 backspace or something like that and
12:08 then you've deleted your animation
12:10 settings and obviously there's a plus
12:14 button there that will then add it back
12:15 again if for any reason you lose both of
12:21 them and can't get them back then you
12:23 can disable this button view
12:25 and just show them as normal child
12:27 stacks so you'll see it says animation
12:29 sitting so this is actually a more
12:31 familiar interface we've got our
12:33 navigation stores and our animations but
12:35 again that takes up more space so really
12:38 this whole exercise is just space-saving
12:40 exercise and it looks nicer and it's
12:43 just nice and compact"}]