0:00 [Music]
0:07 this is the second video in this series
0:10 about using lime light to light box
0:14 within another element on the page so
0:17 using the target setting in lime light
0:20 we can show our content in a section or
0:25 another element on the page instead of
0:27 in a modal light box if you haven't
0:30 watched the introduction video to using
0:33 targets with lime light then I suggest
0:35 you watch that first hopefully have so
0:38 let's get on here on this page we've got
0:42 a side bar stack now this is not
0:46 mandatory at all you can use this you
0:48 can build your layout how you want but
0:50 the reason we're going to use this
0:52 layout is because we're going to
0:54 recreate the chroma examples page now
0:58 the chroma examples page has got a side
1:02 bar and it's got a menu of the
1:04 right-hand side where we can see lots of
1:07 different examples of the chroma menu
1:09 doing different things now with a site
1:13 like this it's always difficult because
1:14 the main site has got its own menu and
1:17 when we're trying to show examples of
1:19 menus you end up with two menus on the
1:22 screen and that's that's awkward so what
1:24 we've got here is this main part of the
1:26 page is actually a lightbox and you can
1:28 see we've got our clothes gadget at the
1:31 top right of that part of the screen
1:33 down the right-hand side we've got a
1:35 series of links which had just got class
1:39 names to the chroma to the lime light
1:41 light boxes and in this case I think
1:44 we're using a lime light launcher but
1:46 you could just use the class name and
1:48 we've got main part of the page here
1:53 when everything else is closed we see
1:56 the site menu this is the actual page in
1:58 the examples the examples page in the
2:02 site so all we're doing is putting
2:05 something over the top of this so if we
2:07 say look at the slide away headers page
2:09 when we open that we're lightbox in this
2:13 over
2:14 top of the page but the effect is quite
2:17 nice and it means that we end up with a
2:20 very coherent structure to our page and
2:23 so there we go for a foundation example
2:26 and then when we go back to examples
2:28 home it closes all the light boxes the
2:31 other thing you'll notice here is that
2:33 we're in we've got a lot of pages here
2:35 there are 15 20 pages in the example
2:38 site we can see the example site here
2:40 and all the pages in it so the example
2:44 site itself is a separate site which
2:47 works completely as a self-contained
2:50 site so we've got no problems with SEO
2:53 or if people go to the actual page links
2:55 for that site but then when we lightbox
2:58 this site it will bring it into this
3:02 side of the page
3:03 but this page if I just refresh this
3:05 page you'll see how fast it loads okay
3:08 it just appears straight away and that's
3:11 because all the content that we've seen
3:13 here all these different pages from the
3:15 other site are all lazy loaded so all
3:18 the loading of these pages happens after
3:21 and only when the actual page in our
3:24 site has loaded so nothing gets nothing
3:27 gets slowed down and it means then that
3:29 user doesn't have to wait we can go
3:31 between one page in another page in the
3:34 in the site we can see all these
3:36 different examples instantly so it's
3:40 quite a nice way to manage large amounts
3:43 of content and we're going to see how to
3:47 do that now
3:54 so back in rapidweaver we've got our
3:58 lair
3:58 now I've just colored the backgrounds
4:00 for now just so that we can see where
4:01 they're going to go so what we've got is
4:04 we've got a sidebar and we've got a
4:06 section Sproat that he's set to be in
4:09 this case 100% height and we're not
4:12 going to worry too much about the mobile
4:14 layout at this moment but for mobile
4:16 obviously just stachy and have the menu
4:18 above or something like that you can you
4:20 can decide what you want to do we just
4:22 quickly preview it you'll see that this
4:24 is what we've got so we've got our
4:26 sidebar and main content areas now the
4:31 first thing we're going to need to do as
4:32 we know from the introduction is we're
4:35 going to need to give our section an ID
4:39 to target with our Limelight's
4:42 so that's going to be SEK 1 just for the
4:45 sake of it it's easy and simple we're
4:48 going to have our limelight stack and
4:50 before we do anything else while we
4:52 remember we're going to set this stack
4:54 to open within that section ok so up at
4:59 the top we've got that targets of things
5:01 we're gonna say sections pro and we're
5:04 going to say sec 1 now our host sizing
5:09 we want to scale our content scale our
5:13 limelight content to fit the host stack
5:15 because our host stack we've set to 100%
5:18 screen height and so we're going to
5:20 scale the lightbox to 100% it'll still
5:25 scroll and everything we're not actually
5:26 going to scroll the contents of the
5:29 lightbox we're going to scroll size the
5:32 lightbox itself to 100% pie we see this
5:36 now if we just do a web page this is
5:40 going to default to the big white dog
5:42 home page and we'll call this BW d so
5:48 that's that trigger and which we're
5:50 going to have a class name for and in
5:53 the simplest case if I just put a header
5:56 on here and we were to change the text
5:59 to be WD we don't need a limelight
6:02 launcher just for quick tests we can
6:04 just give this a custom class of BW do
6:07 so it matches our launch ID and
6:10 straightaway we've got our webpage on
6:15 the page and then we go there's the big
6:18 white duck site and you'll notice we've
6:21 got our lime light clothes gadget over
6:22 the top of the menu so we'd want to put
6:24 that somewhere else or do something with
6:26 that but very very quick and simple in
6:29 its default State
6:31 how do we do the lazy loading stuff that
6:34 I talked about well we've just got our
6:37 lazy preload setting there that's all
6:39 you have to do and it happened pretty
6:42 quickly because this page was not
6:44 loading anything else but if we were
6:46 loading 10 or 15 of these
6:49 these frames without it it would have
6:51 been quite slow so with iframe web page
6:56 content images and most things really
6:59 you're probably better off using the
7:01 lazy preload on any page so that the
7:04 main page can get on with loading
7:06 without the limelight content slowing it
7:08 down so by way of an example let's just
7:14 rebuild a little bit of the chroma
7:17 examples page that we saw before so if
7:20 we recall this was the page we've got
7:22 our page content which is just in a
7:25 sidebar normal content on the page and
7:28 then we're like boxing these other pages
7:31 from the chroma examples website which
7:35 is a separate site which is here so we
7:39 can go back to the home then the menu on
7:43 here and we'll pick a page so let's
7:45 let's let's do this slide away header
7:50 page because it's a bit of a different
7:51 color there we go there's a black and
7:52 white color so it'll be obvious we've
7:54 got it it's just copy that URL
8:01 and we'll change our link in our iframe
8:11 now let's let's use the limelight
8:14 launcher this time because although you
8:17 can launch with a class and that's great
8:18 the limelight launcher is good when
8:20 you're making something akin to a menu
8:22 like we do in here so let's get rid of
8:24 that header and we're just gonna we're
8:26 just going to put a bit of text in there
8:29 you can use whatever text you like but I
8:31 just don't want it to be bold headers so
8:33 we're gonna call this simple chroma just
8:36 for sake of argument and the limelight
8:41 let's just have it too dim when open so
8:46 whichever one is open wings say we can
8:48 style it and change its color which is
8:50 probably more appropriate but we don't
8:53 need to do that now and we're gonna call
8:55 this link simple so we're going to open
8:58 a limelight with an idea of simple so we
9:01 must remember to change our ID here to
9:05 simple because we have it set up before
9:07 from the bwd page okay so we can just
9:11 quickly check that click on our link and
9:17 there we go and then it comes and it's
9:19 there instantly just animates in because
9:21 we've lazy loaded it now the other thing
9:26 we'll do is we'll just put a bit of
9:28 content on the page and we'll use the
9:32 content from the the actual chroma page
9:36 so there we go we've just pasted they
9:39 said this is just the this stuff that we
9:41 don't need these markers because there's
9:44 no actual chrome on the page anymore
9:45 this is just a bit of that page so let's
9:49 just see what it looks like now okay so
9:54 we've got
9:57 main part of our content which is just
10:00 in this project file and then when we
10:02 click this we're going to pull in a
10:03 lightbox over the top of it okay we
10:06 can't see the the clothes gadget we need
10:08 to address that because that's why I'm
10:09 white but we start to build this page up
10:13 now I think it's time to get rid of
10:15 those those colors that we we set up and
10:20 I'm not going to do hundreds of these
10:22 but let's just do one more page so let's
10:26 say just have one of the basic examples
10:29 simple change on sticky fix so this is
10:31 the page where the menu goes gray and
10:34 grows a bit okay so let's just grab a
10:38 copy that URL and we'll we'll add a new
10:45 web page iframe let's just paste that
10:49 URL into it and we're gonna call this
10:52 one sticky fix and lazy preload that too
11:00 and then we're gonna need a another
11:03 launcher so we'll just drag copy that
11:08 one and it's called sticky fix that
11:14 should make sure the text matches that
11:16 just so that we know made a nice menu
11:20 type structure and what we'll do let's
11:22 it seemed as though it is a menu let's
11:27 style them a bit more so when they're
11:30 highlighted the the text will just go
11:32 red so it'll it'll behave a bit like
11:35 you'd expect a menu to behave so that's
11:39 called sticky fix we've got that
11:41 limelight called sticky fix so let's
11:45 preview it
11:48 so now we've got our two pages here so
11:50 we've got our original one which is the
11:52 slide away header and you see the page
11:54 behaves perfectly because it's only in
11:56 an iframe and then we can go to our
11:59 sticky fix page and the pages are
12:03 already loaded because they've lazy
12:04 loaded so it's absolutely instant and we
12:09 can control which information is given
12:12 to the user in a very simple and
12:15 coherent fashion the one last thing I
12:17 will mention in the in the limelight
12:20 settings themselves is and you'll have
12:24 seen that on the chrome examples page if
12:26 you look closely you can animate the
12:28 host content so the animation is set to
12:32 zoom fade for all these light boxes so
12:35 we can we can do it a zoom to match on
12:39 the on the section so if we preview that
12:45 you will see this content here will just
12:49 zoom out as the other one zooms in so
12:52 it's very subtle effect we'll just close
12:55 it and you'll see the section zoom back
12:56 in so it just matches the effects
13:01 together rather nicely and they only
13:05 other thing we'd need to do is is style
13:07 our clothes gadget just like was on the
13:11 original chrome aside which is down in
13:14 the limelight settings we just need to
13:16 set a color for the ringer of them white
13:22 you can take your pick with that let's
13:24 just make it a bright color that you see
13:26 for now I'm not going to go to a great
13:29 deal too of time to style it now but he
13:32 shows you how this this sort of setup
13:35 works and just for the observer to
13:38 answer you'll have noticed the modal
13:41 background showing through when we
13:43 swapped pages in the limelight so you
13:46 probably just want to change that to
13:47 white or transparent or something and
13:51 that's about it for this video this has
13:53 been a bit of a extreme use case but it
13:56 is something that can give you new
14:00 possibility and then where you organ
14:02 his information on your site you'll
14:04 probably use it more non full screen for
14:08 different maps and locations perhaps
14:11 even a series of infographics where you
14:15 lead the the the visitor through a
14:19 series of perhaps product descriptions
14:22 but whichever I hope this has been
14:24 useful in terms of seeing how it works
14:27 and I hope you enjoy using the stack"}]