This is the seventh 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 how to add the jQuery plugin to the site.
Custom Front Page Loop that Displays One Post from Each Category – Part 2 – Create the Static Front Page
Custom Front Page Loop that Displays One Post from Each Category – Part 3 – Create the Custom Loop
Custom Front Page Loop that Displays One Post from Each Category – Part 4 – Look at jCapSlide
Custom Front Page Loop that Displays One Post from Each Category – Part 5 – How to Use jCapSlide
Custom Front Page Loop that Displays One Post from Each Category – Part 6 – Configure the Loop to Create the Required HTML
Custom Front Page Loop that Displays One Post from Each Category – Part 7 – Add the jQuery Plugin to the Site
Custom Front Page Loop that Displays One Post from Each Category – Part 8 – Call the jQuery Script
Rick: The other half of how we did it is bringing the jQuery to bear on the page. We created those structures but those structures by themselves, don’t do anything. Those structures are just handles for jQuery to grab a hold of. And so, that’s what we’re going to talk about next.
And the way this works is it’s a jQuery plugin, right? And so what you have to do is download that plugin and install it on your site. And so for example, if you select download, there we go. You can see it’s starting to download. You see I’ve already downloaded it once today and it’s this little zip file here that if we open it up in WinZip, it’s piece of code and it’s got its own copy of jQuery just in case you needed it. It’s got some CSS definitions and some images. And that’s you know, I mean, it’s got a couple of other things in here to that don’t really matter to us. But what really matters here is this, jQuerycapslide.js.
Laurraine: I have a quick question.
Rick: Yup, go ahead.
Laurraine: The jQuery 1.3.2, that turns on when I go in the dashboard of Thesis, right? And I turn it on?
Rick: Yeah, I’m going to show you how to turn that on in a moment. We’re not going to remove it from the plugin but we’re not going to use it ourselves. We’ll use Thesis to load jQuery for us. But having said that, what we need to do is extract this folder into a folder we created into our site. And you can see that you know, in my Thesis 1.8.1 folder, my custom folder, and inside of custom, I’ve created a folder called scripts. And inside this folder, I extracted that file. So you can see the same things here that were in the zip file. The CSS folder images, the jQuery, the couple of pictures and jQuery slide js. So that’s the first thing you have to do installing a jQuery plugin is you have to bring it in to your custom folder and the best thing to do is create your own scripts folder and put it inside of that folder. So that’s step 1.