This is the fifth in a short series on creating a custom home page that will display the first post from each category and implement the jCapSlide jQuery plugin. In this part we discuss the changes in the HTML structure that are needed to format our content so that it will work in jCapSlide.
Okay so there’s our 6 teaser images, the titles, and the text. And actually, you can see that the excerpt text is shorter than normal because they already have a filter for reducing that size and I forgot to mention here. But in any case, this is what we… essentially, what we had this morning.
And what we’re going to do then is we’re going to be incorporating this jQuery plugin. Now a jQuery plugin is a plugin that… it’s not a WordPress plugin. So it doesn’t work out of the box in WordPress, it’s a jQuery plugin that will work in one way or another in any kind of a website that where jQuery works. And the way jQuery does that is that it… oh, I closed that. Well, what it does is it works on its own set of functions and not everything, just that. I’m trying to find the solution to that problem here. Okay, code drops. That’s what it is.
Okay so if we look at the demo of this, now these things slide up nicely, this is the one I’m trying to emulate right down here, the amazing image title with the feet in the sand. And if we look at the page source, it is working on this structure right here. So you’ve got div class demo and then inside of that, you’ve got a div id of capslide image cont 6 and then it’s got a class and then it’s got the image and then it’s got overlay div that essentially has nothing in it. Then it’s got another class div and then inside of that IC caption is the rest of the content. And the way the jQuery works is that it looks for these particular divs. So you have to have this HTML structure in order to make this work.
And so what I did was essentially, I tried to mirror that here. So I created a div class called byob capslide teaser and that’s essentially the same as demo up here. And then I changed the name but capslide teaser 1… each instance of this actually has to have its own name because if it doesn’t have its own name, it’s going to act on every instance. And so, each instance of this little thing has to be unique. And so each div id that gets printed is going to have to have a unique name and what I did was I added a number to capslide teaser so we’ve got capslide teaser 1, 2, 3, 4, 5, 6… like that.
But then there’s the class IC container and then there’s an image and then there’s a div class overlay and then there’s IC caption and so on and so forth. We’re trying to mimic this.