Build Your Own Business Website header image

Custom Front Page Loop that Displays One Post from Each Category – Part 4 – Look at jCapSlide

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the fourth in a short series on creating a custom home page that will display the first post from each category. In this fourth part we discuss adding a jQuery effect to the teasers that can be created using the jQuery plugin “jCapSlide”.

Video Transcript

Rick: Okay so that’s the first step. Then we want jCapSlide… let’s see, I just want to show you what we have to do next.

Laurraine: Yeah, I can’t figure out where the put the scripts and was I supposed to make a new folder in custom Thesis called… I have no idea.

Rick: Yup, that’s what we’re going to have to do. But before we do that, I want you to see… okay, it’s funny the good site for jCapSlide doesn’t show up in the first search results.

Laurraine: Did you like that plugin? Or is that a plugin that causes a lot of problems?

Rick: Well you know, I haven’t had a chance to try it so I don’t think it’s going to cause a lot of problems. It seems to me like a very small plugin, right? Here’s what it’s going to do. This example here is what we’re trying for, right? We’ve got just an image showing up and then when you hover, the name of the image and some excerpt text shows up, right? This is the target style. And so then, this is really I think the good site for it, code drops. And I think I ended up having to search for it here, jCapSlide. But really, once you learn how to create or incorporate a jQuery plugin into Thesis you know, you can do anything. Anything anybody can show you in jQuery can easily be incorporated there in Thesis.Now the trick to this here… yeah, go ahead.

Laurraine: No, I was going to say because it all has a loop, everything is under loop on the front page, this plugin… I have you know, on my practice, manually the name of each image and then that’s another problem because is the plugin going to know that it’s supposed to do that on the loop?

Rick: Well, I’ll show you how and we’re just going to come back over and look at the demo for just a second. And we’ll take a look at the page source. This is the structure that we have to recreate. We need to create a div with a class of IC container and then the image doesn’t need anything special. All we need to do is put the image address in but after the image address, we need a div class overlay that we’ll have to stick in there and then we’ll need a new div called IC caption and inside that div there will be a paragraph with a class of IC category. And actually, what we’ll do instead of putting the category name in, what we’ll do is… I’m not sure what we’ll do. I actually haven’t tried this yet. I haven’t played with this part of it yet.

Laurraine: What we have to do essentially is we have to take… let’s see, take this… view page source. We’re going to take this structure and explode it so we’re going to take this structure, div class post 165 and turn that into the class IC container. So everyone will have that class and you know, we’re going to take the image that shows up here and instead of having you know, image class thumb align left, it’s going to end up with… it’s not going to have a class at all. It’s going to be sitting inside of this.

Rick: Anyway, we’re going to take each of the pieces of the teaser, we’re going to break it up and give them new classes. And then when it has the new class then this code down here below, this code for example, will not work in WordPress because WordPress requires jQuery to be formatted differently. But were this code formatted such that it would work in WordPress, what we would do here, instead of having #capslide image cont… oh actually, I suppose we could do that. We could give it that same id so we put whatever id we want in here and then .capslide and then we give it a caption color background cover you know, an overlay, whatever we’re going to do for a border and whatever we’re going to do for a caption. And so the code that calls it would just be this little bit right here. We don’t have to have one for every instance because we’re going to do every instance the same way, right? For every instance, we’ll have the same style. And so actually, it’ll be really simple. Essentially, what we’ll be doing will be generating the teaser in this style so that then that plugin will be able to affect it using this piece of code, okay?

Laurraine: Yes.

Rick: Okay so that’s as far as I can take it today. You know, tonight is going to be the middle of the night for you, I know.

Laurraine: Oh, I’m still up.

Rick: Well, if you’d like to work on it again this evening, we can spend another half hour on it again this evening.

Laurraine: Would you mind? That would be great.

Rick: I wouldn’t mind at all. No, not at all.

Laurraine: Oh great, thank you so much.

Rick: Okay? You’re welcome.

Laurraine: So I have to re-enroll…

Rick: Yeah, you have to sign up for this afternoon’s one, right. Okay?

Laurraine: Well, thank you so much. This was too magic, I must say.

Rick: Well, you’re welcome and I’m going to post the code on the forum for you too so you have access to the code right away. Okay, youbetcha.

Laurraine: Sooner than later then.

Rick: Okay, thank you Laurraine.

Laurraine: Thank you very much.

0 Comments… add one
0 comments… add one

Leave a Comment