Lessons

Lesson Info

Lightbox Plugins

we're gonna move on now into lightbox plug ins. And so lightbox plug ins are really cool, and a lot of people use them on the Web. And so we're gonna take a look at a few that I recommend and that you can implement pretty easily. Okay, so let's go in here and let's go to plug ins and choose add new. All right, if you don't know what a light box is, essentially, what it means is I have a photo. I click the photo, my screen goes dark, the photo pops up and it's nice Little window. It's like a showcase. Okay, one of the most popular ones is called Fancy Box. Can all one word fancy dogs? It tells you. Hear that? It uses J query implementation of fancy box. I only say that I know a lot of people are going to say Jay who? But Jake weary. A lot of people don't like using it, or a lot of people love using it. So I always pointed out that it's ah, it's a Jake we're plugging. It's a Java script, basically. Okay, Some people are anti job. Activate it, Okay? And so now, essentially it is already r...

unning. There is no controls, necessarily that you have to do here on this. As you can see, it doesn't really give me any options or anything like that. So if you want to know how to use this thing, what you're gonna have to do is go to the plug in sight. Okay? And it's actually gonna tell you installation how to do it. Okay? Screenshots on how to use it and all that stuff. This is not the best documented plug in ever. But, you know, it works. And so this says that it enables fancy box on all image links, including bit maps, gifts or gifts. But let's be real here. Let's just break something down for a second. Jeff stands for graphically inferior format. So let's let's not put those on our website. Okay? Can we do that, please? I'm serious. People are smiling at me, and I'm serious. I mean, I don't get service. Israel talk, Okay. Graphically inferior format. So let's stick with J pegs and PNG, shall we? All right. So, theoretically, there's a quotable quote. I'm gonna be slammed by web designers all over the planet for that one and that's okay. Um, so let's had a new post who really put myself in a hole? That's all right. Okay, let's add a new post and we'll call this fancy test, right? Fancy test. All right. And so what I'm gonna do is I'm gonna link to an image. Let's do it to text. You say, let's do this is a test of fancy box, All right? Yeah, cause I'm so creative with what I name things. Um, I'll make fancy box a link. Theoretically. All right. And I want to link it to something. Let's link it to an image. What he's saying Forgot what domain I was working on that would help Justin. All right, let's open this image in a new tab just to get the girl. Let's get to shore. L Okay, it's go back and let's paste that in and give it a title of picture. Yeah, So add that link and I'll save the draft and preview. Okay. Just a fancy box. Nice little fancy boxing. Now a lot of people are gonna ask me because fancy box just pops that up like that. Um how do we gray out the screen? Will be black out the screen. That's one of the When I first started using fancy boxes were the first things I wanted to know how to do. I was like, Man, this stinks like, seriously, when you look at that, that doesn't pull my eye to the photo. Right? So here's where you have to do, and this is a little bit of a roundabout way of doing it, unfortunately, But you do have to do it this way. There are other plug ins that provide multiple levels of controls. It's just the fact that this one A is free and two is really easy to work with. Okay, so I'm gonna go in here into my, uh, plug ins and let's reload the plug ins folder cause it's not showing up. There it is. Fancy bucks, OK, inside of fancy box or a couple of different places that you have to look at this. Okay, Number one is going to be the fancy box that CSS file number two would be the j query dot fancy box that Js file inside of the CSS file. You kind of look around, Look around, Look around. See what's going on. I see if I can find. All right, this is probably maybe, uh, fancy overlay. There it is. All right, now you can try to edit it in here. If it works in this, I'll be very happy guy. All right. Background, uh, number sign 000 all zeros and CSS is black. All EFS is white. Okay, just f y I All right, Let's see if this changes anything. It probably won't because yeah. Okay, so unfortunately, that didn't work. So I'm gonna have to get really brave and go into the JavaScript. Oh, no. Jobs group. Okay, So, fancy box. Most of the time, I used standalone version of fancy box that you can download as a stand alone thing. Um, from here, and this is fancy box dot net and so you can actually go in. And you can download this and implement it into your own things. And you can see here that they have different examples of how it works. See how that great at the screen and see how this one, you know, kind of pops out. And this one kind of appears, and then you've got titles and things you can add to it. So this is actually a little bit more robust than their WordPress plug in the WordPress. Playing hasn't exactly caught up yet. So but basically inside of the CSS file of that thing, I just showed you that it's a lot easier to change the color of that. I actually used a standalone version a lot more in the WordPress version anyway. But let's take a look at another one. That's a lot better. It's going to add new. It would help if I could type in there. Thank you. Fly box There. You okay? So there's several different ones in here. Lightbox gallery is pretty cool. Okay. Lightbox plus also another good one that I've used. Simple lightbox is pretty good as well. And, uh, the other ones in here that I use No. See if I can just type out the name thick bucks. There we go. Pick box. Okay, So in this case, you can see the details of this before you install it. Right? Has not been tested with the current version of WordPress. And that's OK. It tells me it's compatible up to 2.86 That's a little old. Okay, 2.86 is a little old. I would love to see this compatible at the three point before I install it. Now I can take a look at it and see you unzip it. Okay, Give me a link. See? Hot integrates. Let's take a look at that. Okay, um, you would have to add in a class of pickpocket this little too to complicate from most people's. Let's go back. Let's just do lightbox gallery. It's installed. Activate alright. Lightbox gallery. I get settings over here on the left for lightbox gallery Right there. So now choose the gallery loading type. In this case, I'm gonna choose just the regular one. If you want to see, um, this one, you can go to the author's website. Check it out. Okay. In case that you would like to use a light box in certain categories, OK, you can do that for that. Ah, lightbox gallery scripts are loaded on every page to do that. It might slow it down. Okay, because javascript on a lot of stuff, slow stuff down. Um, this is big right here. Choose the script loading point. Put that in the footer. Put that the footer right. They also delete your options from here if you want to. All right, let's go into an actual, uh, post. Add new custom fields. Why is that not showing up? Let's go back. Start plug ins. Box gallery. Okay, let's do next. Gen Gallery. That'll be an easy one. Okay, so next Jim Gallery, it's one of the ones I recommended earlier. And that should actually give me my own tab, which it did. So its collapse. All these ups, we can actually see it. Price. There's the gallery. Tam. Okay, add a gallery or images. That's really easy to do a new gallery. Call his O'Casey. Okay. It's a gallery. I d of one notice here to put this on a page, all I have to do is copy this. Okay, So what I'm gonna do is copy this little code. Now we have got to know my clipboard. Okay? I can add a new gallery or I can upload images. Let's upload images to this, right? So I'll go ahead and choose the O. K. C. Gallery. I'll browse. I'm just gonna grab all these photos. It will take some time to do this, but that's not a big deal. Okay, Upload images is gonna go through. It's gonna process them. It's gonna put them in my gallery. It's gonna create new thumbnails for each one. That's good. You don't to regenerate. Thumbnails ranks in like that. All right. Bravo. Finished. Let's go into my arm. My pages add new and I'll call this gallery based in the short code. Remember, that's all I had to do with. Copy that short code pasted in Save the Draft. Preview it. Boom! There's a little gallery. Okay, there's a link that says so show as a slide show. If you do that, it's gonna pop up, and it's actually going to do this where it actually plays a little slide show. I'm gonna go back to picture list and check this out. Boom. Big image image is a little bit bigger than the container, so I would probably have to go back and redo. My image is a little bit. That's not a big deal. Okay, Okay. You get the idea so you can add these lightbox things? Pretty simple. You can add these gallery page and this is goes back to your point about pages you're asking about earlier. There's not a page that supports this, but this plug in makes it possible for me to embed this gallery on a page. And so that's, uh, you know that that's this simple as it gets right there, just person in that thing. And then inside your gallery, you can actually manage the gallery so you can go in here to O. K. C. And you can set up descriptions of it you can set up. You know, all different things about it. Managed the photos that are in it, whatever you want to do, you can also say the page, you know, preview image, whatever you want. Change all this stuff if you want to. You can also create, you know, a new page to put it on. I mean, there's all kinds of options you have in here. You can manage albums in here, so there's no Casey album. You can add new galleries, managed galleries at tags go into options here, and options just configure where stuff is stored. What type of categories there on. I mean, there's all kinds of stuff you can do, and her next Gen galleries, one of the most complete gallery plug ins that exists, and you could just take some time. Unfortunately, don't time to go through every single one of these categories and options here today. But you just see how much of a complete solution it is time, you know, turn your site into a photo gallery so it wouldn't matter what theme I'm running. I could pick any theme in the world I wanted, and I could have my own photo gallery right there. And then let's say, for instance, I wanted this gallery page to be my home page. I could do that. We know how to do that already, right? We go into the settings and we change the reading options and set it to be the static home page and all that good stuff. So this could be my front page if I wanted me to, you know, And then you can always customize CSS and all that good stuff, you know, down the road