Transcript

00:07 this is the second video in this series
00:10 about using lime light to light box
00:14 within another element on the page so
00:17 using the target setting in lime light
00:20 we can show our content in a section or
00:25 another element on the page instead of
00:27 in a modal light box if you haven't
00:30 watched the introduction video to using
00:33 targets with lime light then I suggest
00:35 you watch that first hopefully have so
00:38 let's get on here on this page we've got
00:42 a side bar stack now this is not
00:46 mandatory at all you can use this you
00:48 can build your layout how you want but
00:50 the reason we're going to use this
00:52 layout is because we're going to
00:54 recreate the chroma examples page now
00:58 the chroma examples page has got a side
01:02 bar and it's got a menu of the
01:04 right-hand side where we can see lots of
01:07 different examples of the chroma menu
01:09 doing different things now with a site
01:13 like this it's always difficult because
01:14 the main site has got its own menu and
01:17 when we're trying to show examples of
01:19 menus you end up with two menus on the
01:22 screen and that's that's awkward so what
01:24 we've got here is this main part of the
01:26 page is actually a lightbox and you can
01:28 see we've got our clothes gadget at the
01:31 top right of that part of the screen
01:33 down the right-hand side we've got a
01:35 series of links which had just got class
01:39 names to the chroma to the lime light
01:41 light boxes and in this case I think
01:44 we're using a lime light launcher but
01:46 you could just use the class name and
01:48 we've got main part of the page here
01:53 when everything else is closed we see
01:56 the site menu this is the actual page in
01:58 the examples the examples page in the
02:02 site so all we're doing is putting
02:05 something over the top of this so if we
02:07 say look at the slide away headers page
02:09 when we open that we're lightbox in this
02:13 over
02:14 top of the page but the effect is quite
02:17 nice and it means that we end up with a
02:20 very coherent structure to our page and
02:23 so there we go for a foundation example
02:26 and then when we go back to examples
02:28 home it closes all the light boxes the
02:31 other thing you'll notice here is that
02:33 we're in we've got a lot of pages here
02:35 there are 15 20 pages in the example
02:38 site we can see the example site here
02:40 and all the pages in it so the example
02:44 site itself is a separate site which
02:47 works completely as a self-contained
02:50 site so we've got no problems with SEO
02:53 or if people go to the actual page links
02:55 for that site but then when we lightbox
02:58 this site it will bring it into this
03:02 side of the page
03:03 but this page if I just refresh this
03:05 page you'll see how fast it loads okay
03:08 it just appears straight away and that's
03:11 because all the content that we've seen
03:13 here all these different pages from the
03:15 other site are all lazy loaded so all
03:18 the loading of these pages happens after
03:21 and only when the actual page in our
03:24 site has loaded so nothing gets nothing
03:27 gets slowed down and it means then that
03:29 user doesn't have to wait we can go
03:31 between one page in another page in the
03:34 in the site we can see all these
03:36 different examples instantly so it's
03:40 quite a nice way to manage large amounts
03:43 of content and we're going to see how to
03:47 do that now
03:54 so back in rapidweaver we've got our
03:58 lair
03:58 now I've just colored the backgrounds
04:00 for now just so that we can see where
04:01 they're going to go so what we've got is
04:04 we've got a sidebar and we've got a
04:06 section Sproat that he's set to be in
04:09 this case 100% height and we're not
04:12 going to worry too much about the mobile
04:14 layout at this moment but for mobile
04:16 obviously just stachy and have the menu
04:18 above or something like that you can you
04:20 can decide what you want to do we just
04:22 quickly preview it you'll see that this
04:24 is what we've got so we've got our
04:26 sidebar and main content areas now the
04:31 first thing we're going to need to do as
04:32 we know from the introduction is we're
04:35 going to need to give our section an ID
04:39 to target with our Limelight's
04:42 so that's going to be SEK 1 just for the
04:45 sake of it it's easy and simple we're
04:48 going to have our limelight stack and
04:50 before we do anything else while we
04:52 remember we're going to set this stack
04:54 to open within that section ok so up at
04:59 the top we've got that targets of things
05:01 we're gonna say sections pro and we're
05:04 going to say sec 1 now our host sizing
05:09 we want to scale our content scale our
05:13 limelight content to fit the host stack
05:15 because our host stack we've set to 100%
05:18 screen height and so we're going to
05:20 scale the lightbox to 100% it'll still
05:25 scroll and everything we're not actually
05:26 going to scroll the contents of the
05:29 lightbox we're going to scroll size the
05:32 lightbox itself to 100% pie we see this
05:36 now if we just do a web page this is
05:40 going to default to the big white dog
05:42 home page and we'll call this BW d so
05:48 that's that trigger and which we're
05:50 going to have a class name for and in
05:53 the simplest case if I just put a header
05:56 on here and we were to change the text
05:59 to be WD we don't need a limelight
06:02 launcher just for quick tests we can
06:04 just give this a custom class of BW do
06:07 so it matches our launch ID and
06:10 straightaway we've got our webpage on
06:15 the page and then we go there's the big
06:18 white duck site and you'll notice we've
06:21 got our lime light clothes gadget over
06:22 the top of the menu so we'd want to put
06:24 that somewhere else or do something with
06:26 that but very very quick and simple in
06:29 its default State
06:31 how do we do the lazy loading stuff that
06:34 I talked about well we've just got our
06:37 lazy preload setting there that's all
06:39 you have to do and it happened pretty
06:42 quickly because this page was not
06:44 loading anything else but if we were
06:46 loading 10 or 15 of these
06:49 these frames without it it would have
06:51 been quite slow so with iframe web page
06:56 content images and most things really
06:59 you're probably better off using the
07:01 lazy preload on any page so that the
07:04 main page can get on with loading
07:06 without the limelight content slowing it
07:08 down so by way of an example let's just
07:14 rebuild a little bit of the chroma
07:17 examples page that we saw before so if
07:20 we recall this was the page we've got
07:22 our page content which is just in a
07:25 sidebar normal content on the page and
07:28 then we're like boxing these other pages
07:31 from the chroma examples website which
07:35 is a separate site which is here so we
07:39 can go back to the home then the menu on
07:43 here and we'll pick a page so let's
07:45 let's let's do this slide away header
07:50 page because it's a bit of a different
07:51 color there we go there's a black and
07:52 white color so it'll be obvious we've
07:54 got it it's just copy that URL
08:01 and we'll change our link in our iframe
08:11 now let's let's use the limelight
08:14 launcher this time because although you
08:17 can launch with a class and that's great
08:18 the limelight launcher is good when
08:20 you're making something akin to a menu
08:22 like we do in here so let's get rid of
08:24 that header and we're just gonna we're
08:26 just going to put a bit of text in there
08:29 you can use whatever text you like but I
08:31 just don't want it to be bold headers so
08:33 we're gonna call this simple chroma just
08:36 for sake of argument and the limelight
08:41 let's just have it too dim when open so
08:46 whichever one is open wings say we can
08:48 style it and change its color which is
08:50 probably more appropriate but we don't
08:53 need to do that now and we're gonna call
08:55 this link simple so we're going to open
08:58 a limelight with an idea of simple so we
09:01 must remember to change our ID here to
09:05 simple because we have it set up before
09:07 from the bwd page okay so we can just
09:11 quickly check that click on our link and
09:17 there we go and then it comes and it's
09:19 there instantly just animates in because
09:21 we've lazy loaded it now the other thing
09:26 we'll do is we'll just put a bit of
09:28 content on the page and we'll use the
09:32 content from the the actual chroma page
09:36 so there we go we've just pasted they
09:39 said this is just the this stuff that we
09:41 don't need these markers because there's
09:44 no actual chrome on the page anymore
09:45 this is just a bit of that page so let's
09:49 just see what it looks like now okay so
09:54 we've got
09: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"}]