Michael T Ganschow Green: Well Hello pre recorded people welcome to another session of GR C 175 so today we're going to query from js or end or perhaps better explained we're going to delve into jquery I told you a little bit about it and kind of what it's used for.
Michael T Ganschow Green: Last class now we're actually going to use it we're going to get it all.
Michael T Ganschow Green: Set up.
Michael T Ganschow Green: and ready to use it's going to be crazy you guys don't even know we're going to get it all set up we're going to get it ready to roll, so this should be pretty fun so let's see here let's make sure yep previous class recording is just about uploaded about five minutes left very nice.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's do a quick little review on jquery and then we're going to actually build some jquery.
Michael T Ganschow Green: So, before I do that let's get some screen sharing going on here so i'm not just talking into the void there goes the previous class going online just as a quick reminder, if you have not.
Michael T Ganschow Green: shared your two cents with your fellow students come ons and chrome get out of the way, thank you, please, do feel free to go in and leave your your thoughts and prayers your thoughts for your fellow students on a project to.
Michael T Ganschow Green: Rather impressed by your project tues came out considering you all didn't know responsive design at that point, and now you do.
Michael T Ganschow Green: In fact, the.
Michael T Ganschow Green: The recording for the responsive design lecture finished baking this morning and I am now uploading it to the class website.
Michael T Ganschow Green: The.
Michael T Ganschow Green: Though there is and the lecture recording is just about up zoom link is going so things very nice we're baking that and this one should finish baking probably Friday Saturday, and I will put that up then as well.
Michael T Ganschow Green: Okay, so again don't forget to leave your two cents for your fellow students project tues i've got a couple more that I have to do as well, so i'm going to go in and do those and then.
Michael T Ganschow Green: they're do online by midnight on Friday so i'm going to make sure that i've all of mine, and I hope you guys make sure you have all of yours in.
Michael T Ganschow Green: Now it is time to query some js alright so up i've got this thing set for my class root folder look at these class files.
Michael T Ganschow Green: ooh ooh there's some indexes and some projects and some class recordings, now we don't want that one we want our root folder that we made last class yes every Tuesday I make a root folder I know people like Is this a pattern sure why not i'll call it a pattern if you call it a pattern.
Michael T Ganschow Green: Okay okay so.
Michael T Ganschow Green: let's talk a little bit about jquery so For those of you who are not here last class jquery is a.
Michael T Ganschow Green: behavioral engine that is programmed for the Web it's built on javascript but what it is, is basically a preset series of.
Michael T Ganschow Green: Of animations and responses that you download and stick on your website it's called the jquery engine.
Michael T Ganschow Green: And you link to your website and then you call those specific series of responses, as you need them through the.
Michael T Ganschow Green: Through the jquery interface and we're going to play around with a couple of these as they go on it's a the jquery language is distinct from javascript, but it is derived from it um.
Michael T Ganschow Green: In fact it's used in if you know javascript you'll pick up jquery pretty quick we're not really going to get too deep into jquery frankly.
Michael T Ganschow Green: But we'll talk about initialize and will mess around with some stuff in the ui and things like that, but we're not going to get like hugely deep into it per se.
Michael T Ganschow Green: we'll just mess around with some fun behaviors it does in class so in order to go get the jquery engine.
Michael T Ganschow Green: not terribly hard you go to jquery calm the hot chat window here, so I can post this in the chat Hello there go to jquery calm and then you go here, and yet download.
Michael T Ganschow Green: jquery i'm going to download the Nice uncompressed one so it's wide open now I can click on it and just don't think jquery in my browser.
Michael T Ganschow Green: Because jquery like every other thing on the web is just a text file in a funny hat, in this case the funny hat is Doc js.
Michael T Ganschow Green: Which is also used for javascript like I said they're they're kissing cousins here jquery and javascript fact here i'll just pop this link in the chat to fam there's some jquery engine for you so.
Michael T Ganschow Green: come here and I grabbed a query engine and i'm like look it's a jquery engine, and I say i'd like to save link as don't you believe it and then we're going to save this to.
Michael T Ganschow Green: All look it's already pointed at my scripts folder from last class, but where i'm actually sticking it is inside my root folder in the scripts folder yes.
Michael T Ganschow Green: we're putting the scripts folder to use on snap you guys oh oh oh oh oh Oh, the scripts folder is not decorative.
Michael T Ganschow Green: any longer you guys the scripts folder is not decorative any longer one of schmitz on the camera lens here come on.
Michael T Ganschow Green: Come on, come clean yourself off putting yourself on hang on one second here, I see big pieces two minutes right in the middle of the camera lens wrong we're going to start video but keep talking you guys don't see.
Michael T Ganschow Green: My camera here so that maybe you guys can see me a little clearer, this is the one of the perils laptops and we go all right let's turn video back on high, so there I am again so.
Michael T Ganschow Green: With the new clean Kim Can you see me Kenya, I think you can good good good okay so.
Michael T Ganschow Green: We now have a jquery engine here.
Michael T Ganschow Green: All set and ready to be called periodically in our document to do all sorts of increasingly strange tasks.
Michael T Ganschow Green: So we're going to start off with a couple of basic jquery is out there, and you can search all sorts of different things like.
Michael T Ganschow Green: Whatever you want your site to do jquery and there's probably a jquery that will do that thing we're going to use this for slideshows and light boxes, so you guys will learn how to set those up using a very, very easy to use code and.
Michael T Ganschow Green: And a very limited jquery so you guys will have a good kind of kiddie pool to play in here now m.
Michael T Ganschow Green: g queries are.
Michael T Ganschow Green: For their appearance they're very dependent on CSS So if you think that your jquery is.
Michael T Ganschow Green: Your jquery knowledge is.
Michael T Ganschow Green: Or the jquery is a little too much for you well.
Michael T Ganschow Green: Once you start taking a look at the appearance on it you'll see how CSS governed, it is the actual javascript is mostly just to govern.
Michael T Ganschow Green: The animations and reactions and things like that its appearance is almost entirely driven by CSS.
Michael T Ganschow Green: So we're going to match save and it says oh my God it's already in there, yes we're going to read download the same thing, why we're going to do that, because some of you weren't here you missed it so now I gotta show ya alright So there we go um jquery is downloaded.
Michael T Ganschow Green: And we are ready to start doing all sorts of fun things so we're gonna do responsive slides there's no cash sure wheat way zoom chrome yes, I know you can feel free feel free to go back to where you came from Thank you there's the.
Michael T Ganschow Green: zoom go get out of that alright so we've got a couple of things we're going to play with today, so the first one is we are going to set up a White box and a light box is pretty much what you're seeing on your screens right now, it is a.
Michael T Ganschow Green: specific set of behaviors that graze out your browser window and adds images over the top.
Michael T Ganschow Green: So.
Michael T Ganschow Green: we're going to do here and now, is we we we are going to see.
Michael T Ganschow Green: How to install this so.
Michael T Ganschow Green: This is a nice little basic lightbox one of the things that I like about this website is that it provides some very simple, straightforward instructions.
Michael T Ganschow Green: For installing the lightbox Okay, how to put it on and how to get it going on your website very, very good quick installation very good quick installation actually.
Michael T Ganschow Green: let's see do to do to do there we go alright cool so.
Michael T Ganschow Green: let's wrap this up.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: grabbing the light box files.
Michael T Ganschow Green: By the way, before I grabbed the lightbox files do we have questions and lightbox in the previous class I went over it a bit at the end i'm sure when you were all cotton brained.
Michael T Ganschow Green: So if you got any questions, let me know real quick here, if not we're going to download some files and we're going to start building light boxes, you know.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Then let's go download this thing so.
Michael T Ganschow Green: A great many programming project pages, like this one here and like responsive designs here will point that chime out of my ear sorry work email you're going to go away let's go boo boo boo gonna go bye bye you.
Michael T Ganschow Green: Come back and turn you back on me.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's download this guy so a lot of programming project, you will find her hosted on a.
Michael T Ganschow Green: website called github GI T H ub get up so github is a social media for programmers So if you want to learn programming it it it behooves you to make a github account because programmers.
Michael T Ganschow Green: share a lot of their Open Source projects, you get up there are.
Michael T Ganschow Green: tremendous support and knowledge forums where people post questions and people are answering it and all sorts of things so.
Michael T Ganschow Green: If you get real, serious on the development side of the web and your code and you're doing a lot of coding it always helps to have a github and a lot of these Dudes have get hubs to host their projects.
Michael T Ganschow Green: For example, oh cash has one here to host he has, and you can also grab all of his code, so there is his list of code we're not going to need all of that code, but that is his list of everything there in case you can use it for all sorts of different things now.
Michael T Ganschow Green: In order to download his lightbox we go to this green button labeled code, with a download symbol on it, I wonder what this might be for so we click on this guy and we're given a couple of options.
Michael T Ganschow Green: We can either grab a gift file.
Michael T Ganschow Green: And then open it up in the github APP or or the github desktop or we can come, all the way down to the bottom, and we can download a zip file of everything here and Michael is going to download a zip file of everything here so again how did I get here.
Michael T Ganschow Green: On location like box like literally right down from light box and the top here, we got this nice slide big fat font there's a github link right there.
Michael T Ganschow Green: And then, this leads to is github and I click on the green button code, with a download symbol, and that leads to downloading a zip file, let me copy that link into chat no I didn't want to copy the text, I want to copy the me.
copy link address.
Michael T Ganschow Green: pop it in the chat there we go there's a zip files we're going to download some zip files boom there they go into my downloads folder and they are now ready for me to crack open.
Michael T Ganschow Green: And to play around with so zip files ahoy here we go we're going to tear apart.
Michael T Ganschow Green: His his lightbox paste it into our root folder and make it work for our own nefarious purposes, then.
Michael T Ganschow Green: let's do that so minimize both of these Dudes.
Michael T Ganschow Green: yep looks like the recordings are up i'm going to double check that well i'm here, let me go in here and see if the recordings are up yay images classes yep there is last classes recording chat file and transcript file so we'd all right.
Michael T Ganschow Green: Quick files for now we'll hop into it later.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: minimize the class files as well there's the downloads folder open, but I will close that because it didn't have the current stuff in it and then we're going to go hello, we open downloads so Ray flashes there we go so.
Michael T Ganschow Green: I POPs down and ship out down in a folder labeled lightbox to dash Dev mine is called lightbox to dash do you have to because i've downloaded one already to play with.
Michael T Ganschow Green: So i'm going to click on the Double Click on this zip file to unzip it, and this will give us a light box to.
Michael T Ganschow Green: dash Dev folder.
Michael T Ganschow Green: Where we have all kinds of things for server deployments and all all sorts of fun stuff yeah I mean all kinds of fun stuff and so.
Michael T Ganschow Green: All of this is a nice big folder that's full of everything we've got his example page here with everything going on on it, we have the source files that the example pages using we have.
Michael T Ganschow Green: All sorts of fun stuff well I don't need all of this to make this work with my website okay so here is what I need in order to make this work, so I come in here to the dentist folder di St dist and I Double Click on this disc folder and this gives me.
Michael T Ganschow Green: A CSS folder.
Michael T Ganschow Green: And images folder.
Michael T Ganschow Green: And a J s folder which is his scripts folder.
Michael T Ganschow Green: So we're going to copy and paste some things from this guy into my class folder here real quick.
Michael T Ganschow Green: All right, here we go so GR C 175 open it next to this thing.
Michael T Ganschow Green: And since CSS is, first, we will copy paste a couple of things out of there.
Michael T Ganschow Green: So, first of all.
Michael T Ganschow Green: i'm going to open up my CSS folder so my CSS folder and he has CSS folder are open, side by side and i'm going to copy his to do to do copy his lightbox dot CSS file.
Michael T Ganschow Green: And okay fine.
Michael T Ganschow Green: paste it fun there you go okay so i'm going to copy and paste the lightbox dot CSS CSS file in here, so if I cracked the light box dot CSS file open.
Michael T Ganschow Green: There is a ton a.
Michael T Ganschow Green: ton a.
Michael T Ganschow Green: ton of stuff going on here Okay, so this is all of the CSS that generates the appearance of the lightbox and we're going to come back here and we are going to modify the absolute poop out of this thing.
Michael T Ganschow Green: So this is going to be a great fun, I mean, first of all, this dot lightbox overlay class style right here, this is that window that covers the whole website.
Michael T Ganschow Green: And fills everything fills it all fills everything and this controls it absolutely it's it's it's hilarious so we're gonna we're gonna turn it pink or something that'll be good, maybe blue I don't know we're gonna we're going to make our lightbox do fun stuff and.
Michael T Ganschow Green: So I make sure like lightbox CSS I make sure he has lightbox CSS has been copied into my CSS folder.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: I opened up, he has the images folder and we have some images that come with this thing so when it comes with our a set of.
Michael T Ganschow Green: What amount to.
Michael T Ganschow Green: There they're basically.
Michael T Ganschow Green: User interface objects, essentially, so we have an exit when you click it it closes things.
Michael T Ganschow Green: We have a next arrow for proceeding through galleries of images and a previous arrow for going back through through images and we've got a little gift here.
Michael T Ganschow Green: That, if I throw it in a browser window.
Michael T Ganschow Green: It is a little sweeping circle gift, so that we can see when things are.
Michael T Ganschow Green: So these are basically just little ui things that make the thing go so i'm going to go to images.
Michael T Ganschow Green: And i'm gonna highlight all of these dude no no don't open them Thank you i'm going to highlight all of these Dudes i'm going to copy them.
Michael T Ganschow Green: And I am going to paste them oh there's some that are just like it we're going to apply this to all and replace everybody.
Michael T Ganschow Green: And so, now I have all of the browser chrome that that CSS file is looking for in here, which is very nice so i've got.
Michael T Ganschow Green: All got all sorts of terrible web fonts i've got there's my next and previous in my loading and there's my clothes so i've got all of the various little images in here to make this thing work and.
Michael T Ganschow Green: Then, lastly, I have my js folder here which i'm going to come over here in my website at open up my scripts folder.
Michael T Ganschow Green: Because there is light box dot J s right there by Double Click on it and open it up, this is the script that makes light box work with the jquery engine.
Michael T Ganschow Green: So i'm going to take this lightbox J s here, and I am going to copy this Maybe I should actually use the keyboard commands so you guys can see what i'm doing copy.
Michael T Ganschow Green: And then we're going to come over you and we're going to go paste take any boo So you can see what i'm doing and paste my light box dot J s in with my jquery right so we're going to go.
Michael T Ganschow Green: Now we're all set to build a.
Michael T Ganschow Green: A web page that's got one of these little light boxes on.
questions.
chat.
Michael T Ganschow Green: chat alright so.
Open this thing up.
Michael T Ganschow Green: let's make a brand new html and we're gonna like box.
Michael T Ganschow Green: All right, so i've got my class.
Michael T Ganschow Green: CS or my class root folder open so i'm going to go file new.
Michael T Ganschow Green: And we're gonna make a new html a brand new one ran fresh off the boat a shiny new html.
Michael T Ganschow Green: All right, my extra lines in here, so I can see what the hell i'm doing these guys over.
Michael T Ganschow Green: and give them a title and that title is and here.
Michael T Ganschow Green: begins.
jquery.
Michael T Ganschow Green: bop there we go save.
Michael T Ganschow Green: All right, so what are we gonna call this thing we're gonna call this thing in here we're gonna call this thing.
Michael T Ganschow Green: jquery.
Michael T Ganschow Green: lightbox.
Michael T Ganschow Green: slideshow.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: So there it is jquery lightbox slideshow.
Michael T Ganschow Green: Alright, so i'm going to create a CSS to give them to make it look a little pretty and control things in it, in fact, I might do something fun for the CSS I might.
Michael T Ganschow Green: I might do something fun, this is a little dangerous here look out everybody Michael is going to do something fun so i'm going to create a new CSS file, because I feel like it.
Michael T Ganschow Green: we're going to browse when I want to put the CSS file, I would like to shove into my CSS folder.
Michael T Ganschow Green: And I would like to save this thing as.
Michael T Ganschow Green: we're going to call this thing jquery page dot CSS.
Michael T Ganschow Green: And shove, it in the CSS folder save there they go yes safely.
Michael T Ganschow Green: Okay, and there they are hi i'm a jquery page dot CSS alright cool so now.
Michael T Ganschow Green: jquery page dot CSS i'd come in here and i'm just going to make a regular body to delete a lot of the automated in the browser so we're going to go margin zero.
Michael T Ganschow Green: padding zero.
Michael T Ganschow Green: And text align.
Michael T Ganschow Green: Center.
Michael T Ganschow Green: tiffany boo just like that, and you know what.
Michael T Ganschow Green: i'ma show you guys something else fun.
Michael T Ganschow Green: So a great many moons ago a student in one of my web classes sent me colors Villa.
Michael T Ganschow Green: And color zilla is a.
Michael T Ganschow Green: it's a color picking extension for various browsers works pretty decently but what I use it for is a it's a great CSS gradient generator so.
Michael T Ganschow Green: copy this and paste this into the chat for you guys Bob there's something in the chat a nice link to this color zilla.com slash gradient editor gradient dash editor, this is a nice mixer for.
Michael T Ganschow Green: For CSS gradients that is even more thorough than dream weavers mixer Why am I using this as opposed to dream weavers mixer to put a gradient in the background well.
Michael T Ganschow Green: I kind of want to radio gradient like a big like circle, maybe not anything fancy like you know porky pig is gonna come out about and tell it tell us that this is all folks but.
Michael T Ganschow Green: I just a nice big circular gradient so i'm going to mess around in here a minute generate myself a circular gradient and copy paste it and i'll walk you through kind of what i'm doing as a little fun exercises so.
Michael T Ganschow Green: Alright cool beans so let's jump in and make a quick radio gradient here, and you guys can feel free to play around with your own gradients as well, so.
Michael T Ganschow Green: This thing's got a lot of tools, you can orient your gradient horizontally vertically diagonally whatever i'm gonna make mine, a radio gradient so it's a big circle.
Michael T Ganschow Green: And down here in the color format, where it says hex I want my colors to be rgb rgb and some hot transparency action X booty for now.
Michael T Ganschow Green: Basically, the this gradient right here works pretty much like photoshop gradient does where you click underneath it and you can add little houses to make the gradient do things.
Michael T Ganschow Green: me, and if you want, and when you want to change the colors you can Double Click and come in here and change the color blue I think we're gonna do we're gonna do a nice to Nice to mixing into.
Michael T Ganschow Green: want to do with this one, maybe two we go a pure green movie or a darker to darker grenier to.
Michael T Ganschow Green: ooh pretty so we knew that we could come in here, maybe an add a ring to it if I was feeling rinky dinky we can add a pink or now don't feel anything i'm going to do just a nice simple one color to one color gradient transition but i'm just going to make it radio and copy paste it.
Michael T Ganschow Green: Alright, so let's drop it in here so we've got all of these Dudes and we're all set.
Michael T Ganschow Green: So we're going to put a radio gradient in here, so I change this to rgb a changes to radio, you know mess around with the gradient here pretty much is a gradient tool.
Michael T Ganschow Green: Any graphic software is got one, so you all know how pretty much how to use it so.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: Go here we're going to going to copy all of the other thing i'll leave the colors yellow link up at the top, why not.
Michael T Ganschow Green: Well, you know we're going to copy this into this style.
Michael T Ganschow Green: And it's a lot of CSS tab tab this line back saves it look at that be a gradient So when I open this thing up in a browser window preview in chrome us, yes, I would like to save all the changes in fresh What did you write wrong wrote something wrong Michael.
Michael T Ganschow Green: Do to do to do to do to come might have done something wrong Oh yes, actually it's writing it wrong now why did you write this as background, now the then background image.
Michael T Ganschow Green: who used to write better code, why is it not writing background image anymore, I may have to rescind my endorsement of it if it's going to do this to me well poopy.
Michael T Ganschow Green: Because it used to write background image for your gradients.
Fresh.
Michael T Ganschow Green: Fresh all right now background image come down here hi background image Doo Doo Doo Doo Doo Doo there's the gradient.
Michael T Ganschow Green: And we are going to do the background position Center centers it sits in the middle.
Michael T Ganschow Green: background saw.
Michael T Ganschow Green: hover.
Michael T Ganschow Green: Know repeat background element fixed so that should give us a nice gradient a there we go cool so all the same stuff we had to do with previous gradients now we have a nice radio gradient just sitting right there, let me see if we've got a.
Michael T Ganschow Green: There it is, and I am going to go instead of background image up here i'm going to leave that for old browsers i'm also going to go back round.
Michael T Ganschow Green: color there we go, we have a nice mix of colors there we go now it's a background congratulations everybody it's a bouncing baby background ready for our imagery.
Michael T Ganschow Green: So another way to do your gradients Although, as I noticed.
Michael T Ganschow Green: You it's probably better to change let's see if it works let's see hang on let's see.
Michael T Ganschow Green: With this thing back rounded let's see if this works, and it was just not having enough of the background image a couture molson because it should have come in and stripes without all of the no repeats and such so let's see here oh there's two of them, yes, when when.
Michael T Ganschow Green: i'm sick let's see if it works and see if background works with those yep it does okay cool So there we go, so it does work I just needed to put in all of my background image stuff in here to get it to run so there's that a nice radio gradient for our background.
Michael T Ganschow Green: Alright, so now for my body tag I am I have in the.
Michael T Ganschow Green: In my class files and in the class files, you can download from the website right now i've included in the images, a series of images here of various foodstuffs.
Michael T Ganschow Green: And I also included.
Michael T Ganschow Green: thumbnails various foodstuffs so we're going to make us a nice little image gallery okay so light box.
Michael T Ganschow Green: Light box as a couple of interesting things about it back this up here, so you don't.
Michael T Ganschow Green: You don't actually need an image to trigger the light box Okay, you can apply it as a hypertext reference link to an image.
Michael T Ganschow Green: Around anything so you can send images in and have them linked to anything in my case and in his case in his examples here he's got images being the triggers to open them up.
Michael T Ganschow Green: thumbnail size versions of the bigger images, but this thing can be used with any linking structure me, I want to put thumbnails on but you don't have to.
Michael T Ganschow Green: So now we're leaving this here because I need you, thank you and we're going to go here and we're going to insert.
Michael T Ganschow Green: You know I feel like being a dirty cheater with my gallery here.
Michael T Ganschow Green: I feel like being a dirty cheater so for my gallery to rack and stack everything I am going to build my gallery as an ordered list Okay, as one of those bulleted lists, we talked about i'm going to build it as one of those okay.
Michael T Ganschow Green: so very much how we did our navigation, so if you take a look, you know, on.
Michael T Ganschow Green: let's go to our ugly page So if you take a look at our ugly page there is our an ordered list and list items and all of that we're basically going to build what amounts to a navigation.
Michael T Ganschow Green: All ready to go, so that we can set these images up and get them rolling.
Michael T Ganschow Green: So uh let's have some fun.
Michael T Ganschow Green: Okay, so we're gonna go body.
Michael T Ganschow Green: ul.
Michael T Ganschow Green: i've got six images in my thing so i'm going to have six list items so got my URLs and allies i'm gonna put a class on this one.
Michael T Ganschow Green: What a class on this one so we're having a nav ul rather than doing a tag styles are typically done ul Carson this we're gonna go class and this thing is going to be.
Michael T Ganschow Green: Why no light.
Michael T Ganschow Green: boxes.
Michael T Ganschow Green: And then we're going to put in some list items l I am I.
Michael T Ganschow Green: You know I.
Michael T Ganschow Green: know what I could I could interact, the rest of them, but i've got a pair i'm a copy paste Bob.
Two three.
Michael T Ganschow Green: way chat box there we go phone and we go.
Michael T Ganschow Green: So there is six of them right there and I just start filling filling these guys with images.
Michael T Ganschow Green: Are C equals quotation marks images folder someone you know someone is a delicious breakfast we're going to go all.
Michael T Ganschow Green: equals quotation marks.
Michael T Ganschow Green: Part of a nutritious I just breakfast.
Michael T Ganschow Green: Part of nutritious breakfast.
Michael T Ganschow Green: So there we go we've got a nice little got a first image boom there it is he look at that thing there it is alright, so now.
Michael T Ganschow Green: We can start changing these up doing some copy pasting here copy give me some hot paced action you bet ensure, and why not absolutely and sure now we can change these out thumb to.
Michael T Ganschow Green: i'm called thumb to.
Michael T Ganschow Green: beans beans, the musical fruit.
Michael T Ganschow Green: thumb three.
Michael T Ganschow Green: And we're going to go.
Michael T Ganschow Green: There, a party for our.
Michael T Ganschow Green: For.
Michael T Ganschow Green: I bet this fountain.
Michael T Ganschow Green: sounds amazing.
Michael T Ganschow Green: Right, some five.
Michael T Ganschow Green: sunset flowers.
Michael T Ganschow Green: Lastly, thumb six who are you actually those are sunrise flowers.
Michael T Ganschow Green: These are going to be sunset flowers.
yeah that sounds good.
Michael T Ganschow Green: That sounds good.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: Very good alright so let's have images here.
Michael T Ganschow Green: And there.
Michael T Ganschow Green: Just kind of hanging out.
Michael T Ganschow Green: Just you know, being the be so what i'm going to do is, I am going to use our ul tag like a little container and we're going to set this guy up so that these guys go horizontally across.
Michael T Ganschow Green: So.
Michael T Ganschow Green: very similar to our nav ul here i'm going to come into my style sheet here Oh, not the right that style sheet dance style sheet.
Michael T Ganschow Green: And data like that.
Michael T Ganschow Green: Job light light light boxing bracket technology list.
Michael T Ganschow Green: style.
Michael T Ganschow Green: type.
Michael T Ganschow Green: In your display.
Michael T Ganschow Green: links.
Michael T Ganschow Green: What was the Center line one here the Center line one was justify content, I was getting mixed up the horizontal Center one in the vertical central and just if.
Michael T Ganschow Green: content.
Michael T Ganschow Green: Center.
Michael T Ganschow Green: Okay, so there we go, so we got some justified content in the Center good to go GD g.
Michael T Ganschow Green: let's see different sized images, should we resize them for putting in so For those of you who don't have chat open Cassandra asks if we have different sized images, should we resize them before putting them in our images folder and dreamweaver and what I would do is.
Michael T Ganschow Green: For your thumbnail versions of the images make them a uniform size.
Michael T Ganschow Green: On low catches website his images are all different aspect ratios, so you know we come in here and there's this image.
Michael T Ganschow Green: And then you click on this image and it's a little square you come down here and like this image is like super vertical and then you start clicking through these and it changes aspect ratio, so the actual pictures themselves.
Michael T Ganschow Green: I wouldn't worry too much about it, but what I would do is for the thumbnails that are meant to trigger your galleries, yes, I would like cut a square out of your image so they're a uniform size, because neither the neither the.
Michael T Ganschow Green: The thumbs or the big images that are going to be shown in the in the light box are sized by that code really.
Michael T Ganschow Green: I believe below a certain point they're sized by themselves so whatever size you pick for them.
Michael T Ganschow Green: that's the size is going to pop in your browser yeah so just something to be aware of, when you set them up my advice make squares, for your thumbnails.
Michael T Ganschow Green: Unless you want to do something like he's done here, and do like some kind of neat you know, mutton Jeff different size thumbnails do that works for you cool, but I would advise just chopping squares the thumbnails and then you can leave the images to be whatever size, you want.
Michael T Ganschow Green: So a cool cool cool i'm glad I was just gonna ask that answers the question alright so.
Michael T Ganschow Green: let's start hooking some things up here so i've got.
Michael T Ganschow Green: Right so where we where we go, we got we got our we got our our CSS here and we've got some light box display flax just find content Center which.
Michael T Ganschow Green: Everything yep there, they are cool beans and I think i'm going to actually add a couple of things to our lightbox in here so i'm going to go padding actually first i'm going to go with.
What.
Michael T Ganschow Green: like an 80% of the browser window.
Michael T Ganschow Green: He.
Michael T Ganschow Green: ain't.
Michael T Ganschow Green: and try something real quick are going to one other thing.
Michael T Ganschow Green: FLEX by he other thing on my FLEX box want to make sure that wraps so we're going to go FLEX rap rap.
Michael T Ganschow Green: rap rap dope Andrew with 80% and then we will do.
Michael T Ganschow Green: Will centerline it will do margin.
Michael T Ganschow Green: Zero auto Center.
Michael T Ganschow Green: And then we'll do pattern.
Michael T Ganschow Green: 20 pixels all the way around.
Michael T Ganschow Green: For our background.
Michael T Ganschow Green: color we're going to mix one.
Michael T Ganschow Green: color picker because we're going to make it pure as the driven snow white, but we're only going to make it 20% opaque i'm snap dog Bam so it's like a kind of ghost box and then we're going to give it a border forger.
Michael T Ganschow Green: One pixel solid white.
Michael T Ganschow Green: poop and that should give us a nice kind of ghostly looking white box here.
Michael T Ganschow Green: let's send it hey it's centered all of my things yay and they wrap like it that they ramp excellent excellent.
Michael T Ganschow Green: Order radius.
Michael T Ganschow Green: 10 px as big rounded corners, make it a little less opaque.
Michael T Ganschow Green: 40 Nice and up.
Michael T Ganschow Green: yay you know what i'm going to add some top margin, you know what you guys, you know what this is my party so i'm going to cry if I want to we're going to add some top margin yeah we go save.
Michael T Ganschow Green: lap there it is, and only just need to add some margin around the images so i'm gonna go I can put them on the allies, or I can put them on the IMG that doesn't matter i'm gonna stick them on the fly so i'm gonna go light boxing.
Michael T Ganschow Green: Space allies and we'll tackle only list items within the list label light box and and we're going to go margin.
Michael T Ganschow Green: we're going to go.
Michael T Ganschow Green: Go 10 px top and bottom.
Michael T Ganschow Green: And 5pm side to side, it should give a nice even margin around everything, yes, Sir there, it is a nice even margin around everything, although i'm my just make it i'm mo I might make it zero px on the bottom, so that.
Michael T Ganschow Green: say so that our pictures will sit nicely and go and go Doo Doo Doo Doo Doo Doo Doo Doo or or.
Michael T Ganschow Green: Even need to worry about that why don't I just do five pixels all the way around.
Michael T Ganschow Green: And not worry about it, Michael because you're overthinking things once more, because that is always the case that everything you do so.
Michael T Ganschow Green: There we go and they're nice five pixels between them there, they are ready to add like boxing to them so very pretty little gallery just a simple little gallery made with a list item do to do to do to do to do to do, and that we can then.
Michael T Ganschow Green: get everything all solidly stuck in on here so let's stick some things you know that.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: All this has been prepped you guys know how to do everything that I just did here, this is all kind of review we just doing a couple of things a little bit differently, the techniques of all has kind of been there we're just putting to use a few things that we've never combined before.
Michael T Ganschow Green: Now we're going to start getting some new things so i've got a nice little area and I got some images that could really use some light boxing but.
Michael T Ganschow Green: I have to do something else, first, before I do that, I have to wrap my images in links, so that the light box has something to hook on to is the light box itself.
Michael T Ganschow Green: needs a tags to function, the entire lightbox is actually built as a set of attributes that live in a tag so i'm going to link all of these images to their big image version.
Michael T Ganschow Green: So i'm in here and we're going to wrap everything as i'm going to go a a going to go close that up.
Michael T Ganschow Green: And i'm going to go ah raph equals quotation marks except instead of going to one of our pages or out to another web page.
Michael T Ganschow Green: we're going to route around in the images folder why because we're weird like that we're like we're we're sticking where we're making a rubber snake eating its own tail webpage is eating its own its own images folder guys send help.
Michael T Ganschow Green: So i'm going to do a regular a win no targets link on it no target blank on it, we want just a regular a tag so when this thing gets Clichy clicked on.
Michael T Ganschow Green: Sep when this thing gets Clichy clicked on fresh.
Michael T Ganschow Green: There it is a link to the big image happens done work for you don't make a sound, by the way she got to click on and go and it'll work alright so i'm going to.
Michael T Ganschow Green: Add in a bunch of a's are going to copy paste yes dreamweaver is going to cry, what do you see how much crying dreamweaver is going to do here, what do you see it to see me pasting it a bunch of days you see how terribly wrong, I am look at all this angry on getting all buzzy at me here.
Michael T Ganschow Green: There we go we're getting like Ruby rod levels of buzzy here.
Michael T Ganschow Green: Well don't worry we're going to fix that because I only copy pasted the opening a tags what a monster, how can I even be left alone to teach people web design when I do things like this okay so.
Michael T Ganschow Green: You to do i'm just going to change my image links, so they go to the big boy versions of each of these images why because it can, this is my website i'll cry if I want to and then.
Michael T Ganschow Green: i'm going to come over here ALE and we're going to add, in closing, is at the end in between the image tag and the Li and closing Li going to close out Oliver is just going to come through here and close out all of our a's and suddenly suddenly suddenly.
Michael T Ganschow Green: We should all work.
Michael T Ganschow Green: watch it now you guys have seen the lecture explosion or two now you know when this happens and like that they work, the link into the big versions of them.
Michael T Ganschow Green: And you go go get them big photos notice, by the way, that some of these photos are slightly different.
Michael T Ganschow Green: almost like I wanted to demonstrate.
Michael T Ganschow Green: So when i'm all sorts of photos shifting and things happening, we are ready to put in our light box so questions from the peanut gallery about light boxes.
Michael T Ganschow Green: or anything i've done.
Michael T Ganschow Green: Just be lightbox.
Questions about anything else feel free.
Michael T Ganschow Green: I.
Michael T Ganschow Green: boxes thing up here.
Michael T Ganschow Green: Okay, so we are ready, we are ready, willing and able to be light box here so i'm actually I actually clicked away from chrome a little too early, because we have low caches everything here, we have to talk about.
Michael T Ganschow Green: Every thing good so we downloaded on files at step one and his installation instructions K we opened up a zip file and we threw the zip bits.
Michael T Ganschow Green: into our working graphics and working graphics into our root folder that is step two so sort the different files that are in his file there in the dist folder in his file di es de de Este.
Michael T Ganschow Green: sort of take those and sort them into your images folder and CSS folder and your scripts folder so we're going to use the scripts folder did guys will actually going to put the scripts folder to the G.
Michael T Ganschow Green: Now, ready to install it so he recommends linking to his lightbox in the.
Michael T Ganschow Green: In the CSS and linking to the script right here now he is missing.
Michael T Ganschow Green: is missing one critical thing here in the directions and I think you guys could probably spot what it is.
Michael T Ganschow Green: Ah.
Michael T Ganschow Green: Nowhere does it say the link in the jquery engine Okay, here we go here we go make sure you've got jquery also make sure, just in case, just in case you've got jquery also.
Michael T Ganschow Green: Alright, so now we've already got jquery we're going to check it out.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's go put them to CSS foist.
Michael T Ganschow Green: CSS voice So what are we going to do, we are going to.
Michael T Ganschow Green: Because i'm lazy you guys know how lazy I am by this point right, I am just going to duplicate my jquery page that CSS link here.
Michael T Ganschow Green: And i'm going to change it from jquery page CSS as to light box not CSS just like that now all of a sudden, the light box CSS is linked in here to.
Michael T Ganschow Green: Several of you back when you're working on your project tues had questions about making multiple style sheets to one html.
Michael T Ganschow Green: And I told you guys don't worry about it, you absolutely can do it if you want to separate out your stuff into separate style sheets, as you can see here.
Michael T Ganschow Green: I have separated my stuff out into separate style sheets and here we are, we have a lightbox CSS right here in fact i'm going to throw a comment on it so that future scholars when they download this page will be able to see this CSS controls.
Michael T Ganschow Green: The appearance.
Michael T Ganschow Green: of our lightbox.
Michael T Ganschow Green: uh huh and would go it's a commentary action going on here director's commentary OK now i'm.
Michael T Ganschow Green: What i'm about to do.
Michael T Ganschow Green: Some of these tutorials are going to disagree with God, so there is two schools of thought on where you should link in external scripts that are modifying things on the webpage.
Michael T Ganschow Green: there's a school of thought that says, you want to put them up in your head next to your CSS very similar to your CSS file going in so that a.
Michael T Ganschow Green: browser will pre load all of your websites behaviors first as it's loading down through the website.
Michael T Ganschow Green: So go through and up up up up up up up up up up pick up your CSS BA BA BA and pick up your scripts then display your content Okay, so that your content is already being presented with behaviors attached to it.
Michael T Ganschow Green: Now I slightly disagree with this so just low cash, by the way, i'm jquery.
Michael T Ganschow Green: and its associated scripts are frequently fairly large files large and web terms, so.
Michael T Ganschow Green: If I.
Michael T Ganschow Green: scripts folder where Would I be so.
Michael T Ganschow Green: notice the jquery engine is like 289 kb that's pretty good it's pretty good size as pretty good size for the web, so those of us who don't necessarily want to load a big file before we actually.
Michael T Ganschow Green: display the content in the browser window, I put the scripts links actually down in our body tag right here before the closed body at the end of all things here can.
Michael T Ganschow Green: We put our scripts links in right there and notice on the caches page that he advises it as well include the javascript link at the bottom of your page before the closing body tag and before the closing body tag.
Michael T Ganschow Green: So I would I like to do too so inserting scripts now actually inserting them into your document is dirt easy dirt dirt easy okay so.
Michael T Ganschow Green: Unlike a CSS which has a, which is a singleton tag scripts is a dual tag structure that's because it's multi purpose, it can be used to link to external scripts and it can also be used for writing scripting into your web page.
Michael T Ganschow Green: I think we're actually going to use it for both today's so First things first we got to hook up a jquery engine before we can do anything So here we go.
Michael T Ganschow Green: First things first script tags script.
Michael T Ganschow Green: Close script.
Michael T Ganschow Green: Now, if we want to hook it up to our jquery, that is, in our scripts folder we go script.
Michael T Ganschow Green: As our C equals quotation marks and then we go rummaging in our scripts folder yea high scripts no, I want to rummage in my scripts folder now put it there and grab of jquery link so script slash and then the jquery engine.
Michael T Ganschow Green: Yes.
Michael T Ganschow Green: This is the engine that powers, all of this.
Michael T Ganschow Green: jquery.
Michael T Ganschow Green: magic little little jazz hands till days.
Michael T Ganschow Green: Engine engine the powers, all this jquery magic jquery.
Michael T Ganschow Green: will not work without this thing linked into your document.
Michael T Ganschow Green: boom you've got a link that jquery engine script source script slash jquery whatever version, you have J s bracket bracket closing script, because that will power everything else OK.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Now now that's linkedin we can link in low catches script to actually drive these pop ups take any boo so let's do it so let's go script.
Michael T Ganschow Green: Doing script.
Michael T Ganschow Green: scripts script.
Michael T Ganschow Green: script.
Michael T Ganschow Green: src equals quotation marks scripts slash like box.js.
Michael T Ganschow Green: This script drives the.
Michael T Ganschow Green: pop up lightbox.
Michael T Ganschow Green: behavior.
Michael T Ganschow Green: boom.
boom.
Michael T Ganschow Green: So this script will fire off our.
Michael T Ganschow Green: Our light box, but we're not done yet So what have we done so far we've installed our light box up here our light box CSS to control the appearance of our light box.
Michael T Ganschow Green: And then we've come down here and we added in our jquery engine and then we come down here and we added in our light box script okay.
Michael T Ganschow Green: All right, here we go, so if I open this thing in the browser second to do anything not going to do anything, because we need to initialize our light box, for example by come here.
Michael T Ganschow Green: guys down there we go fresh and then we go hi no i'm just popping images man I don't know man I don't I don't know it's not working, yes it isn't working, we have to hook it up.
Michael T Ganschow Green: So, once we have the jquery engine hooked up once we have the lightbox hooked up, then what we have to do is, we have to initialize the.
Michael T Ganschow Green: The light box with attributes in our html so basically what happens is, we attach a series of attributes to our image tags and that turns them into light boxes okay.
Michael T Ganschow Green: And it's very simple all right very simple yeah here's how you do it to come into your age ref.
Michael T Ganschow Green: come into your hrs and you do a data dash lightbox.
Michael T Ganschow Green: equals quotation marks and then you can put whatever word you want in here.
Michael T Ganschow Green: So i'm going to do class.
Michael T Ganschow Green: DEMO.
Michael T Ganschow Green: Safe doesn't matter what word it is whatever word you want, you can stick it in data dash lightbox equals class DEMO.
Michael T Ganschow Green: Now then, fresh.
Michael T Ganschow Green: Bob there it is there is my lightbox the image sitting right there notice my other one just POPs in like that, but this guy.
Michael T Ganschow Green: he's a light box and.
Michael T Ganschow Green: he's pushing himself right in like that okay Jim chrome Thank you know way sweet now there's a couple other thing there's a couple of attributes, you can add to it as well hey you can add a data title attribute to it so i'm going to come in here and do that i'm going to go data title.
Michael T Ganschow Green: equals quotation marks.
Michael T Ganschow Green: I am a caption.
Save.
Michael T Ganschow Green: And I go for it.
Michael T Ganschow Green: And I pop it open and sure enough down at the bottom, I am a caption and so that is how you capture the images with this data dash title, I am a caption.
Michael T Ganschow Green: And then, lastly, lastly, you can also put in a data dash alt, which is the alt attribute for that pop up image, so I can go.
Michael T Ganschow Green: Data dash alt equals, I am the all tag fault attribute.
Michael T Ganschow Green: For the POP.
Michael T Ganschow Green: image.
Michael T Ganschow Green: We go.
Michael T Ganschow Green: Put a little note here.
Michael T Ganschow Green: initialize is it.
Michael T Ganschow Green: Oh, oh whoa whoa.
Michael T Ganschow Green: Iit initialize is the.
Michael T Ganschow Green: lightbox.
Michael T Ganschow Green: Data title.
Michael T Ganschow Green: dash title.
Michael T Ganschow Green: I put a dash title in the chat.
Michael T Ganschow Green: it's one of those days data dash title.
Michael T Ganschow Green: provides.
Michael T Ganschow Green: caption.
Michael T Ganschow Green: cool so.
Michael T Ganschow Green: Now i've got a fully armed and operational lightbox here.
Michael T Ganschow Green: There it is with the caption oh snap done here we go.
Michael T Ganschow Green: I now it's time to show you guys some fun stupid lightbox tricks.
Michael T Ganschow Green: So again, if you look at low caches instructions here, it does have some bonus stuff we can play around with these guys.
Michael T Ganschow Green: I don't know I don't know if I want to play around with these guys, we might we might come back and play around with these guys later, once we get a little more comfortable with with jquery, but you can actually edit kind of how it behaves a little bit.
Michael T Ganschow Green: With some of the with this, I.
Michael T Ganschow Green: lightbox option property you throw in a script tag but we're not going to worry about that right now we are going to do.
Michael T Ganschow Green: Is we are going to make an image set now image sets are you see his DEMO here when you open up an image and you hover over the side here and it pops up arrows to continue through like it's a gallery like that that's an image set cam.
Michael T Ganschow Green: images that are really cool.
Michael T Ganschow Green: And here's how you doing.
Michael T Ganschow Green: So remember our data dash light box and one of these year data, the tat data dash light box.
Michael T Ganschow Green: equals.
Michael T Ganschow Green: let's call this one we're going to call this one.
Michael T Ganschow Green: Data set DEMO, what do you want to call it.
Michael T Ganschow Green: yeah you know what i'm gonna do that.
Michael T Ganschow Green: image that DEMO.
Michael T Ganschow Green: And i'm going to add a data title these guys as well.
Michael T Ganschow Green: I don't want to give this look out.
Michael T Ganschow Green: beans.
Michael T Ganschow Green: All right now.
Michael T Ganschow Green: Is I add the here's how you make an image set okay.
Michael T Ganschow Green: Any images, you want to be part of an image set.
Michael T Ganschow Green: simply give them the same data dash lightbox name, so if I come here.
Michael T Ganschow Green: And I make all of these images part of a data dash lightbox image sent DEMO.
Michael T Ganschow Green: And you know what will give data titles to everybody.
Michael T Ganschow Green: will call this one.
Michael T Ganschow Green: This flower.
Michael T Ganschow Green: looks back at you.
Michael T Ganschow Green: and
Michael T Ganschow Green: let's see here.
Michael T Ganschow Green: There is a small fortune.
Michael T Ganschow Green: In.
Michael T Ganschow Green: There is a small fortune in change.
Michael T Ganschow Green: In this fountain.
Michael T Ganschow Green: Wake up sunshine.
Yet something here.
Michael T Ganschow Green: period.
Michael T Ganschow Green: And lastly.
Michael T Ganschow Green: BA BA BA BA BA BA BA BA BA alrighty then.
Michael T Ganschow Green: Soon it will be time to sleep.
Michael T Ganschow Green: Now time for a DEMO we got all these guys going right.
Michael T Ganschow Green: If I go to my page everyone should link up there goes and I hover over the top and notice an arrow POPs in.
Michael T Ganschow Green: I can now go through.
Michael T Ganschow Green: and go from image to image.
Michael T Ganschow Green: To image, known as also underneath the caption there's a image number of number so of the total number that you've applied that data dash light box that identical data dash lightbox name to it gives you this listing here, along with your various captions.
Michael T Ganschow Green: So.
Michael T Ganschow Green: questions on light boxes and how to apply them pretty durn straightforward.
Michael T Ganschow Green: myself on mute myself, you can actually hear me.
Michael T Ganschow Green: Hello all right.
Michael T Ganschow Green: Now let's modify the appearance of our light box, a little bit.
Michael T Ganschow Green: No dark is nice here, but you know what I think windows should be pink right.
Michael T Ganschow Green: By the way, I look at all the tabs and dream Weaver here yeah of the scripts attached.
Michael T Ganschow Green: So the appearance of that thing is controlled by this overlay right here.
Michael T Ganschow Green: So we can come in here and we can say you know what.
Michael T Ganschow Green: pink my background color pink pink.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: pink pink it is it's so pink pink or turn the filter off.
Michael T Ganschow Green: mix my own rgb a background color oh.
Michael T Ganschow Green: it's all over now baby blue background color you can color picker what's make it a little more magenta.
Michael T Ganschow Green: And and we're gonna make it slightly I will leave it 100% so i'll show you what it looks like when it doesn't have any transparency.
Michael T Ganschow Green: And then we'll add some transparency so that you can see why you need transparency, so you can see, this i'm sorry dunder there blob there we go cool we're going to add oh see now it's not just the filter they're also using capacity I know let's just do that what color capacity.
Michael T Ganschow Green: let's do.
Michael T Ganschow Green: we'll start off with 0.95 can see just a teeny wisp of the website through it fresh dot I look there's kind of a website back there, what if I just say no, I don't want any.
Michael T Ganschow Green: Show me nothing.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: Bob huh totally sealed the website off oh snap oh no oh em gee totally sealed it off.
Michael T Ganschow Green: Look at the action.
Michael T Ganschow Green: And it still goes through.
Michael T Ganschow Green: Our lunch there's our flower there's our fountain.
Michael T Ganschow Green: ears are sunrise and sunset flower.
Michael T Ganschow Green: i'm at one transparency.
Michael T Ganschow Green: Like maybe 0.85 in my background.
Michael T Ganschow Green: And suddenly your friend.
Michael T Ganschow Green: Bam there we go.
Michael T Ganschow Green: Alright sweet so that's a change that color.
Michael T Ganschow Green: Are you thinking this lineup here around it, this stroke, I think it's a stroke let's see here could be a.
Michael T Ganschow Green: could be box find out here.
lb ma border border.
Michael T Ganschow Green: yep here it is border alright so border radius.
Michael T Ganschow Green: Know i'ma turn the border radius off, so the edges are sharp know rounded edges here.
Michael T Ganschow Green: they're just for sharpies so this light boxes dot light box.lb image two styles down from our lightbox overlay I believe.
Michael T Ganschow Green: Is what controls, the thing around our picture so i'm gonna go border 15 pixel solid white so they look like friggin polaroids let's see what this looks like, here we go refresh.
Michael T Ganschow Green: Our yeah look at that polaroid look when you know even bigger, I think I bring a solid 20 on that border.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: Bam oh yeah look at that that is a solid solid solid looking like i'm totally a magazine picture and or polaroid someone carelessly through in the middle of the website um alright, so now, now that we have that established.
Michael T Ganschow Green: let's see if we can go down and find the font this is visible during transitions to T, if I can find that fun i'm gonna.
Michael T Ganschow Green: Have a font it's not as they're loading if I load and give a look there it is look at it spinning hey me everything's loading.
Michael T Ganschow Green: Okay, I want to find that tight and see if I can get.
Michael T Ganschow Green: to remember where the type is controlled by here I think it's I.
Michael T Ganschow Green: Think it's data container.
Where you.
Michael T Ganschow Green: you're not oh that's the data at the bottom there Okay, so there it is lb caption that's it.
Michael T Ganschow Green: So i'm gonna come over here to LV caption and i'm going to say you know what's a nice caption you know it's a nice caption here hang on a second lb caption.
Michael T Ganschow Green: i'll be i'll be details lb caption so we're going to go.
Michael T Ganschow Green: let's see lb with any other lb data's nope.
Michael T Ganschow Green: lb data containers no color.
Michael T Ganschow Green: lb data container there we go that's that.
Michael T Ganschow Green: Alright, so let's make some captions happened here so we're gonna go.
Michael T Ganschow Green: let's see 13 pixels we're gonna go maybe let's do.
Michael T Ganschow Green: font family.
Michael T Ganschow Green: gotham.
Michael T Ganschow Green: semicolon.
Michael T Ganschow Green: refresh.
Michael T Ganschow Green: Now it's Nice and and and and bigger maybe we'll do.
Michael T Ganschow Green: 0.8 m's.
Michael T Ganschow Green: rash.
Michael T Ganschow Green: i'll make it bigger.
Michael T Ganschow Green: No 1.2 m's big.
Michael T Ganschow Green: yeah Nice and big all right now let's change that data color lb data now make you want to make you not white we're gonna go we're gonna make you what color should I make it let's go some little standout you got it dark orange.
Michael T Ganschow Green: As that that going to show.
Michael T Ganschow Green: Oh that's actually my caption oh so that's my caption colors can.
Michael T Ganschow Green: make that a screaming white, then I can find my where my number is who, I think this is it right here lb number.
Michael T Ganschow Green: That that Grad sack Ray X what i'm talking about alright so let's see here.
Michael T Ganschow Green: Oh yeah no we gotta go San Sarah so we're going to go gotham gotham against we're gonna make this color only this thing screen where make this thing bright orange right here.
Michael T Ganschow Green: Alright, so just kind of rummaging through this thing, so you guys can see what i'm editing so you can edit it yourself on your own.
Michael T Ganschow Green: To the to the dark orange look at that there goes see how it looks.
Michael T Ganschow Green: And we look, are we clashing appropriately.
Michael T Ganschow Green: Oh it's almost invisible let's not insane we did okay so i'm gonna go color is white.
Michael T Ganschow Green: will be number.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: There we go it's better and we're gonna go.
Read.
Michael T Ganschow Green: Chad barely visible now make it.
Michael T Ganschow Green: Like a white.
Michael T Ganschow Green: will do that font family again to it font.
Michael T Ganschow Green: font family.
gotham.
Michael T Ganschow Green: Did it did it did it did a couple of sizes to those pixels maybe even maybe even.
Michael T Ganschow Green: 0.9.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: refresh Bob.
Michael T Ganschow Green: yeah there we go that's a considerably interesting how many make it like a lime green or some shit will see no.
Michael T Ganschow Green: No yeah beans alright cool we go on green i'm missing the lime green i'm an adult i've seen lime green while know what, why does so pass a law firm owners new line.
Michael T Ganschow Green: get better imagination CSS, what do you call your line green icon of chartreuse the fancy name for lime green and you will find we're going to name and chartreuse So there we go, we got to chartreuse.
Michael T Ganschow Green: chartreuse.
Michael T Ganschow Green: There it is like that this flower looks back at you.
Michael T Ganschow Green: So lightbox questions everybody lightbox questions.
Michael T Ganschow Green: setup you gallery hook up the CSS hook up jquery look up lightbox and then use data dash light box as an attribute in the tag in order to make it run.
Michael T Ganschow Green: Act I got to add a comment you guys just reminded me to add a comment here.
Michael T Ganschow Green: In identical.
Michael T Ganschow Green: Oh dash dash Michael dash dash.
Michael T Ganschow Green: And identical.
Michael T Ganschow Green: data.
Michael T Ganschow Green: dash lightbox.
Michael T Ganschow Green: identical data dash light box which.
Michael T Ganschow Green: will make each.
Michael T Ganschow Green: Link heart.
Michael T Ganschow Green: And image set.
Michael T Ganschow Green: meaning.
Michael T Ganschow Green: People can navigate from image to image without.
Michael T Ganschow Green: clicking back on the website.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So questions.
Michael T Ganschow Green: No questions, it is then i'm going to move on to installing our little.
Michael T Ganschow Green: responsive CSS.
Michael T Ganschow Green: image rotator yeah this one's really interesting image rotator.
Michael T Ganschow Green: So light box is kind of a good little gateway drug.
Michael T Ganschow Green: You know, gives you a nice little behavior it uses a lot of CSS for its appearance, I mean this whole thing is just frickin madness look at this i'm I am a caption now.
Michael T Ganschow Green: responsive slides.
Michael T Ganschow Green: is a little different.
Michael T Ganschow Green: responsive slides has a.
Michael T Ganschow Green: responsive slides has a couple of different things that it needs to do.
Michael T Ganschow Green: So what it does, is it basically runs through a little slide show up here so there's this little slideshow just kind of chugging along, you know as slideshows do.
Michael T Ganschow Green: And it is a slideshow that is built around it, an ordered list, full of images i'm a very similar structure to what we have on the other one.
Michael T Ganschow Green: And indeed it is just so so.
Michael T Ganschow Green: This is kind of a natural outgrowth but it's a little fancier and we can tune it with some behaviors here, so one milk.
Michael T Ganschow Green: Okay So here we go.
Michael T Ganschow Green: let's add this guy started download him.
Michael T Ganschow Green: You gotta go all the way to the bottom, and let me pop him into the chat.
Michael T Ganschow Green: There is responsive slides calm we're now ready to add him to our.
Michael T Ganschow Green: web zone here.
Michael T Ganschow Green: So it takes you two years github shocker I am jack's complete lack of surprised that a programmer would have get up all darn look at that so i'm going to grab.
Michael T Ganschow Green: This zip file.
Michael T Ganschow Green: chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug chug all right.
Michael T Ganschow Green: Now we're ready to start installing this dude hi Thank you zoom chrome we're going to shrink both of you and we're going to close up look ash because we don't need him anymore you've played around with his thing we know what he does now now need to show you something else.
Michael T Ganschow Green: So responsive slides comes in a folder called responsive slides js dash master.
Michael T Ganschow Green: And if you go in it it's a bunch of different files again, but all we really neat is when I look at this he provides us with the files, you can see a DEMO and action here, of course, with his images and everything i'm going to steal his.
Michael T Ganschow Green: Second, and but.
Michael T Ganschow Green: He provides us with a CSS file and js file right here all ready to go so i'm gonna take me this js file right here.
Michael T Ganschow Green: i'm going to copy that since i'm already in my scripts folder over here from when we were copying across look caches and I am going to paste in responsive slides dot J s katie boo just like that and.
Michael T Ganschow Green: Then i'm going to go and click on this responsive slides dot CSS and go to my CSS folder here, and I am going to copy.
Michael T Ganschow Green: and paste responsive slides dot CSS just come on pop it in right there right now here we go we're all set and cocked locked and ready to rock so we've got everything there, except maybe some images to DEMO with so i'm going to go thief his DEMO images here.
Michael T Ganschow Green: we're only need the big ones, but he's got a bunch, as you can see moon that image looks familiar that image looks familiar so.
Michael T Ganschow Green: we're going to grab these guys.
Michael T Ganschow Green: And we're going to copy it.
Michael T Ganschow Green: copy.
Michael T Ganschow Green: And we're going to pick.
Michael T Ganschow Green: one item in one dot jpg is already there hey almost like a copy these but for so that you guys could download them from the class folder if you wanted to follow up.
Michael T Ganschow Green: Alright, so it makes all the place down in my CSS folder I contain a folder called respond or it's a CSS file called responsive slides dot CSS.
Michael T Ganschow Green: Within my script I have a thing called responsive slides that J s yeah and in my images, I have the one, two and three are ready to roll so we're ready to make this thing go so i'm gonna do that.
Michael T Ganschow Green: Here we go.
Michael T Ganschow Green: So let's check his installation instructions shelley.
Michael T Ganschow Green: What must we do first things first to download it unzip everything done in your various folders and then we need to start linking files are right.
Michael T Ganschow Green: let's Let us start linking files, here we go now we've already got a jquery engine right here Okay, so all we need is another script.
Michael T Ganschow Green: thing to link to our responsive slides that Jay yes we're going to do a bracket and script opener and then a script closer and then we're going to put some source action on there i'm script.
Michael T Ganschow Green: slash responsive slides js.
Michael T Ganschow Green: Yes, script controls our slideshow.
Michael T Ganschow Green: Okay, then up here in my CSS is i'm going to duplicate my light box CSS.
Michael T Ganschow Green: And we come here to where it says lightbox at CSS and i'm punching an artsy dream Weaver can find it for me there it is CSS slash responsive slide CSS and i'm going to say this CSS controls the appearance of our slideshow.
Michael T Ganschow Green: Oh.
Michael T Ganschow Green: Right skis we got the slideshow now we need to do is come in here and we need to make a ul Li image gallery or you can be lazy like Michael and copy his code.
Michael T Ganschow Green: And then edit something real quick just copy his code.
Michael T Ganschow Green: paste it into your file and do a quick little bit editing oh snap dog need is a little bit adding more than a little bit editing.
Michael T Ganschow Green: yikes let's get these, this is a spicy meatball going to go here and we're going to go here and gonna go here and then i'm going to go images slash then i'm going to go images slash and then i'm going to go images.
Michael T Ganschow Green: In there it is there's three images, in the last item say and if I open the thing up in my browser.
Michael T Ganschow Green: I have a giant image is it don't worry it's huge loss shrinkage in a little bit its enormous will shrink it down in a little bit.
Michael T Ganschow Green: promise okay promise.
Michael T Ganschow Green: So questions on putting this thing together so far.
Michael T Ganschow Green: All right.
let's make it work.
Michael T Ganschow Green: So this thing differs from low caches bit in a couple of ways.
Michael T Ganschow Green: Much in one way, one way were low caches was initialized that is fired up and run via.
Michael T Ganschow Green: attribute in the.
Michael T Ganschow Green: In the links.
Michael T Ganschow Green: This thing is run by a little initialize a script we throw in the bottom right before the closed body that attaches itself to the our slides CSS so let me copy paste this into my document and then i'm going to pick it apart and go over how it works yeah so.
Michael T Ganschow Green: The blind man is he peed into the room okay cool excellent so we're gonna grab this.
Michael T Ganschow Green: Yes.
script.
initialize is.
A slideshow.
slideshow.
Michael T Ganschow Green: Unlike the lightbox.
Michael T Ganschow Green: This slideshow.
Michael T Ganschow Green: needs to be initialized.
Michael T Ganschow Green: With a little teeny bit.
Michael T Ganschow Green: Of scripting.
Michael T Ganschow Green: This code looks like this, by the way, and paste it into your into your chat so you can get an up close look at it.
Michael T Ganschow Green: So here's what it's doing.
Michael T Ganschow Green: it's saying.
Michael T Ganschow Green: When you read this.
Michael T Ganschow Green: start a function.
Michael T Ganschow Green: And then, it says apply this function to whatever object has a class style of our slides on it.
Michael T Ganschow Green: So anything that's got our slides on it apply the function responsive slides to it.
Michael T Ganschow Green: So we hit save.
Michael T Ganschow Green: and open this up in the browser window.
Michael T Ganschow Green: Here it goes this giant enormous crazy slideshow is slide showing look at it.
Michael T Ganschow Green: yeah, we need to size this thing a little bit so it's a little more he's Nepal than where it is now so.
Michael T Ganschow Green: i'm going to come into my jquery page here.
Michael T Ganschow Green: Right after my light boxing's.
Michael T Ganschow Green: And i'm going to copy the selector for our slides here and i'm just gonna do a little sizing just a little bit our slides.
Michael T Ganschow Green: Oh, oh oh oh two periods, no bad Michael so we're going to go margin needs much margin we'll see here in a second.
Michael T Ganschow Green: So we're going to go yeah margin.
Michael T Ganschow Green: Zero auto.
Michael T Ganschow Green: Like a tautology so that it will Center itself and then with.
Michael T Ganschow Green: make a little narrower than anything above.
Michael T Ganschow Green: 75%.
Michael T Ganschow Green: Save fresh.
Michael T Ganschow Green: Why don't you know.
should be.
Michael T Ganschow Green: Well, fine Lou I know all way way way, I know what I gotta do okay well.
Michael T Ganschow Green: looks like the thing is overriding my style is put directly on our slides but that's fine what i'm going to do is i'm going to stick our slides in a container so we're going to go do.
Michael T Ganschow Green: And then did.
Michael T Ganschow Green: And then clan.
Michael T Ganschow Green: slide show container.
Michael T Ganschow Green: There we go and then we're going to shrink it.
Michael T Ganschow Green: Because it'll size, the size of the container.
Michael T Ganschow Green: looks like it's overriding just sizing, the main thing but that's okay every soldier needs a container anyway, so you know what i'm going to make a container okay.
Michael T Ganschow Green: There it is slideshow container.
Michael T Ganschow Green: Technology.
Michael T Ganschow Green: With.
Michael T Ganschow Green: 75%.
Michael T Ganschow Green: There it is 75%.
Michael T Ganschow Green: Look at that I think we can shrink it even smaller so, is it just we're going to go hype.
Michael T Ganschow Green: or.
cool.
Air it is.
Michael T Ganschow Green: They say howdy styled one up top really shrink it down because he's done it nicely shrunk down to take a look at his DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO CSS pop that up What did he do oh.
Michael T Ganschow Green: And DEMO dot html sure why not.
Michael T Ganschow Green: see what he's done what did he call Oh, this is a whole different DEMO.
Michael T Ganschow Green: What does it so he's got.
Michael T Ganschow Green: slides I was doing by ids a weird we.
Michael T Ganschow Green: that's that DEMO that CSS.
Michael T Ganschow Green: rapper slider to origin zero auto so i've got.
Michael T Ganschow Green: I got to see this DEMO with them in a browser window open this thing up.
Michael T Ganschow Green: Oh interesting okay so he's got he's got these things.
Michael T Ganschow Green: Alright, so let's see here then let's see this top one.
Michael T Ganschow Green: There we go, so this top one is.
Michael T Ganschow Green: See the width on this.
Michael T Ganschow Green: A just trying to check out how to add a width, why not my source code.
Michael T Ganschow Green: Okay slideshow one slider one so DEMO.
Michael T Ganschow Green: F slider one.
Michael T Ganschow Green: Word okay so we're controlling with done it buddy.
Michael T Ganschow Green: Okay there's those there's those because it should size to the container.
Michael T Ganschow Green: metric trolling heights enjoying right.
interesting.
Michael T Ganschow Green: Oh, we have a mystery here guys, we have a mystery.
Michael T Ganschow Green: i'm.
Michael T Ganschow Green: With 100%.
Michael T Ganschow Green: should be 100% of the container.
Michael T Ganschow Green: Okay interesting alright so.
Michael T Ganschow Green: hang on one second here.
Michael T Ganschow Green: Take a look at mine refresh.
Michael T Ganschow Green: Center it real quick so we're gonna go margin zero auto.
Michael T Ganschow Green: OK OK so that's nice centered but why is it now.
Michael T Ganschow Green: Is the height, the one does it might be refresh nope it's ignoring height.
Michael T Ganschow Green: ooh okay so hang on one second I need to go grab a note on something real quick, I will be back.
Michael T Ganschow Green: hey for those who are watching live i'm going to troubleshoot a minor lecture slogan here, because this should be.
Michael T Ganschow Green: being changed, so I am going to take a look at a couple things here and see if I can get this fixed.
Michael T Ganschow Green: For those who want to leave a little early please feel free because i'm going to troubleshoot this thing and then i'm going to save it and put it online, so you can download it.
Michael T Ganschow Green: And the next class, we will re engage with both of these and i'll show you how to edit them slightly, and then I will show you some more jquery so for the moment i'm gonna see if I can fix why my thing is not picking up a height here it's mostly just.
Michael T Ganschow Green: fading in and out through space and time here so i'm going to see if I can fix it here if you've got questions feel free to ask them other than that.
Michael T Ganschow Green: i'm going to kind of talk out loud as i'm fixing it here and see what I what I can do so let's get this fixed it's not showing height, and it should be taking it through the container so sums up so let's go.
Michael T Ganschow Green: Just do it as a fixed width.
Michael T Ganschow Green: Something super tiny like that fresh oh to see not react well to percentages Oh, I wonder what else I do height auto.
Michael T Ganschow Green: Okay, she does not react well to percentages interesting once you slide showing nicely alright cool so let's see.
Michael T Ganschow Green: Let me double check that theory.
Michael T Ganschow Green: So she's exploding to this full height.
Michael T Ganschow Green: But as soon as she needs she needs to be an exact with interesting huh.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: Interesting um the slideshow needs to be any exact with that's fascinating you Steve you mentioned that in this documentation that is fascinating cool okay so that's new because I thought I did I thought it needed a width.
Michael T Ganschow Green: it's going 100% right so let's go yeah don't back up, thank you, no, no, no, no up up up up up up okay you out of the way and we go okay so body html each one rapper padding.
Michael T Ganschow Green: 20 pixel margin.
Michael T Ganschow Green: Oh OK interesting.
Michael T Ganschow Green: The different widths.
Michael T Ganschow Green: Oh, I see what he's doing.
Michael T Ganschow Green: Okay, so that's how he's doing the responsive oh Okay, it needs a Max with have something set on it.
Michael T Ganschow Green: Okay i'm a dirty bird okay needs a Max with have something set on it.
Michael T Ganschow Green: Yes, okay okay Okay, so it needs.
Michael T Ganschow Green: let's see if this doesn't.
Michael T Ganschow Green: Okay, so does need some form of fixed with you don't necessarily have to do a fix with right off the BAT, but it does need a form of fixed width Okay, let me annotate that in my CSS see there it goes ah OK so just needs a Max width on it in order to work properly.
Michael T Ganschow Green: i'm going to go 20 pixels topic.
Michael T Ganschow Green: we're going to go with 65% maximum with 800 save refresh.
Michael T Ganschow Green: Alright cool well that answers that question to to do to do cool okay sweet sweet course I would find out about it, right after I released everybody in class, but whatever all right, let me work machine here.
Michael T Ganschow Green: slideshow continue.
Michael T Ganschow Green: On slideshow.
Michael T Ganschow Green: needs are you out of here heather never got one.
Heather Amistani: Thank you to buy.
Michael T Ganschow Green: I will attempt to.
Michael T Ganschow Green: Use remaining.
Michael T Ganschow Green: Remaining 45 minutes of class.
Michael T Ganschow Green: Remaining 45 minutes of class to do the forum post awesome alright.
Michael T Ganschow Green: Alright later pre recorded people.
Michael T Ganschow Green: With these files live and then i'm going to do all those foreign pounds and meeting for all.