004 Creating a photo rotator with jQuery Cycle
Viewers: in countries Watching now:
The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.
- Creating a custom URL in WordPress
- Adding breadcrumb links to sites
- Creating a toggle button with jQuery
- Adding Twitter feeds to a site
- Adding PayPal buttons to pages
- Uploading photos to your web site
- Embedding videos for different browsers and devices
- Parsing and placing a YouTube video feed
004 Creating a photo rotator with jQuery Cycle
A lot of plug-ins require you to issue complex commands or follow strict formatting rules for organizing your code. JQuery Cycle shines above the rest, because it's super-easy to setup. So the first thing you're going to need is a simple page structure with a series of images that have been sized to the same proportions. I am using a div class right here to make sure that I can target these things with jQuery Cycle and CSS. Now let's add some links to the jQuery and jQuery Cycle libraries.
I am going to go into my codesnippets and copy script tags that load the jQuery and the jQuery Cycle library from different content delivery networks. This is a great way of speeding up your code if it finds the content delivery network, the code will load from that network. If it doesn't, then it will load a local copy which I have placed the local copies of both of those libraries right here. So I am going to copy that, and go back into my start file, and add that right at the end of our head section. This will just add the libraries and it won't make anything spin quite yet.
So we need to add a second version of the code and in that version we are going to initialize the jQuery Cycle command as well as feed these scripts some variables. So I am going to copy that, and go back into my start file and add these after I call my scripts. You can see that immediately it'll start to take over and the pictures will start to fade, and if you're wondering if that was all there is to it, you'd be right. This is it. This is one of the cool things about this plug-in, it's super-simple to setup, and you could see that there's a few variables that we can play with right here.
Timeout is how much time it takes to fade between each photo. So of course, we can change that just by changing the numbers. These are in milliseconds. If you want the actual transitions to go a little faster, we can add the speed variable, and type-in a millisecond number for that as well. And you could see the transitions happen a lot faster. Of course, it will be really boring if all we could do was fade between images, so jQuery Cycle has a lot of different options. If you go back into the jQuery Cycle page, you can look at their beginner demos page, you could see all the different effects for your animations.
You could see we can scrollRight, scrollLeft, grow, fade, zoom, wipe, just about every kind of animation that you can do in jQuery. So I am going to grab the scrollLeft effect right here and go back into my page and try out that effect on our images. So the page reloads, and you'll see it slide in just a second. Now by default, the images will keep on animating even if I move my mouse on top of them. So one of the things that you could do is actually pause the animation if somebody rolls over the image. So if I add this command, and turn it on by using the value 1, and I roll over the image, you will see that it will prevent my animation from going.
You can also randomize the order of the images by adding the random command. You can easily add navigation to the slider by typing in links for your navigation tags and then adding commands to your jQuery script. So we'll go back into the codesnippets and grab some links and navigation. We will add in a previous and a next button, as well as page navigation. So I want to copy that and go back into our start files, and I am going to paste that navigation at the bottom of my code right here.
Now if you look at the page, right now we only see the left and right navigation. We don't see the nav. That is something that jQuery is going to programmatically generate for you. To get these to start working, we'll go back here into jQuery Cycle and we'll add an additional command to add the next button, we will type-in the keyword next, and we'll give it the name of the id of our next button, which is right now of course next. So we will type that, make sure we type the pound sign at the beginning to make sure we are targeting an id, and if we want to add navigation to the previous button, we type-in prev, and then in quotes we also type in the id for that button.
So if we take a look at our project now, we can use these buttons to navigate between files. Now you probably don't want the transitions to be random right now. So I'll take that out of here and we can cycle through the different photos in that fashion. Let's go back and switch this thing to a fade. Now if I want to add the navigation, I do something similar. I just simply add the word, pager, and it'll create the different pages for us, and in the pager then I will put in my id for the navigation that I've created.
Right now, it's just an empty link and you could see that at the bottom of my pages, jQuery has created links to the different photos that are in the project automatically. So I can switch to anyone of those by clicking on these links. Now of course you can take any of these things and style them any which way you want, and you can also make the structure of this document a lot more complicated. So right now we only have three different image links right here. If we wanted to add headlines and descriptions, all we need to do is create them within individual tags.
So jQuery Cycle will take a look at whatever the first level of those tags are and animate inbetween those first level tags. Let me show you a more complicated example to see how you can style things, and how jQuery can work on more complicated projects. So we'll open up this finished file, and we'll preview that, and you will see that I have added headlines as well as summaries, I've styled my tags so that they will disappear when I don't have my mouse on top of the image, and they will appear when I have my mouse on the image and I can just click on these different items to navigate to the different photos.
And all we have done there is made sure that we created an item for each one of our photo elements and jQuery is animating between these different items. Whatever we put in the items, jQuery will animate and slide and fade in-between. So we've got the image here, a section for our information with a headline, and a paragraph, and we've wrapped around everything that we want to rotate inside this rotator tag, and then we have put navigation underneath and wrapped everything on a different tag called rotatorgroup so that we can style that with CSS.
If you want to find out more about jQuery and related technologies, don't forget to visit the lynda.com Online Training Library. There's quite a few courses on jQuery and related technologies.
There are currently no FAQs about View Source.