Seasonal Savings: 20% off selected memberships for a limited time. Give now

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

004 Creating a photo rotator with jQuery Cycle

From: View Source

Video: 004 Creating a photo rotator with jQuery Cycle

Hello! This is Ray Villalobos and welcome to View Source! In this episode we're going to build an image fader with one my favorite jQuery plug-ins jQuery Cycle. So if you're ready to stop, slide, and roll with a bit of JavaScript, then it's time to View Source. So jQuery is a JavaScript library that makes it easy to select things like you would with CSS and add animation and other methods to them. One of the beautiful things about jQuery is its ability to be extended via the use of plug-ins, and when it comes to building image rotators or sliders, I really like a project called jQuery Cycle.

004 Creating a photo rotator with jQuery Cycle

Hello! This is Ray Villalobos and welcome to View Source! In this episode we're going to build an image fader with one my favorite jQuery plug-ins jQuery Cycle. So if you're ready to stop, slide, and roll with a bit of JavaScript, then it's time to View Source. So jQuery is a JavaScript library that makes it easy to select things like you would with CSS and add animation and other methods to them. One of the beautiful things about jQuery is its ability to be extended via the use of plug-ins, and when it comes to building image rotators or sliders, I really like a project called 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.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 16188 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.