Transcript

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