Start learning with our library of video tutorials taught by experts. Get started

Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

with Chris Converse

Video: Previewing the final project

Hi! This is Chris Converse, and this is a course on creating a wraparound effect for your homepage marquee. I want to start by showing the way the marquee works in the previous versions of this particular project. So if you've completed the second course in this particular series where we add an autoplay to the marquee, one of the things that we set up is we have this navigation over here that allows us to click and animate between different states of our marquee. So here I am on the third panel. If I click over here, we go to the fourth panel, from the fourth panel over to the second panel, and we basically animate through this photo lineup. Now since the first version of this course, we've gotten a lot of requests for adding features.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver
41m 46s Intermediate May 18, 2012

Viewers: in countries Watching now:

Join Chris Converse as he teaches how to add a wraparound effect to your homepage marquee with Dreamweaver and a concise bit of jQuery code. The course covers positioning the photos, adjusting the navigation, activating the marquee, and making sure the marquee auto-plays. In a few short movies, designers can learn how to add this dynamic feature to their web sites.

For more information on creating the marquee, please watch Create an Interactive Homepage Marquee with jQuery and Dreamweaver.

Subjects:
Web Web Design Projects
Software:
Dreamweaver jQuery
Author:
Chris Converse

Previewing the final project

Hi! This is Chris Converse, and this is a course on creating a wraparound effect for your homepage marquee. I want to start by showing the way the marquee works in the previous versions of this particular project. So if you've completed the second course in this particular series where we add an autoplay to the marquee, one of the things that we set up is we have this navigation over here that allows us to click and animate between different states of our marquee. So here I am on the third panel. If I click over here, we go to the fourth panel, from the fourth panel over to the second panel, and we basically animate through this photo lineup. Now since the first version of this course, we've gotten a lot of requests for adding features.

One was to add the autoplay, which is the course we're going to be starting from here. And the second we've gotten a lot of is to add a wraparound effect. So I am on the fourth panel and I click to the first panel, we just want to sort of wrap it around. What currently happens is if I come over here and click on the first panel, we animate through all of the panels in the marquee back to the first panel. And if I'm on the first panel, like we are right now, and I click to the fourth panel, again, we animate through the entire photo lineup. So instead, what people have been asking for is the ability to go from the fourth panel over to the first panel.

So what I want to do is let's open up the final project up in a browser and show you what we are going to be completing at the end of this course. Here we're on the first panel. Let's click over to the fourth panel. And then notice that the marquee moves to the right hand side, giving us that sort of wraparound effect. I can still continue to click these buttons and we still get the illusion that all of the photo lineup is moving to the right. And again, if I come over to the last photo, click on the first panel, we animate toward the left. And then again, I can continue to click second and third and all of the photo lineup appears to move to the left in a consistent manner.

Now from a usability standpoint, this seems really easy and trivial; from a programming standpoint, we are going to need to do a couple of things to manipulate our marquee. So I want to bring up a sketch and explain what it is we are going to be doing. Using JavaScript, once we generate the four images that we have for each of our panels, we're going to take the first photo and the last photo, duplicate them, and then move them to the opposite ends of the lineup. Now with six photos in our lineup, when we're on the first panel and the user clicks to go to the last panel, we are actually going to animate the photos toward the right, revealing the very first photo.

And then once the animation is complete, we are going to snap the timeline back to show the fifth photo, which is the same as the very first one. And then we are also going to do the same effect when we are on the fourth panel and the user clicks the first panel. We are actually going to animate to the right, showing the far rightmost photo which matches the second photo, and then again snap the timeline back once the animation is complete. The user is not going to see the snapping of the photo lineup back and forth, but this snapping effect is going to give us the ability to continue to move the photo lineup either toward the right or toward the left, based on what the user is interacting with.

So I hope this course sounds interesting to you, and if so, let's get started with the first movie.

Find answers to the most frequently asked questions about Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver.


Expand all | Collapse all
Please wait...
Q: This course was updated in April, 2013. What changed?
A: Since the release of this course, Chrome conflicts with jQuery 1.6, and browsers run the autoplay when the windows is not in focus. To remedy these issues, the author has added a movie to Chapter 5 that will show you how to:
- Update the version of jQuery
- Detect the focus state of a web window
- Create a compound conditional JavaScript statement
Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver.

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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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