Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver
Illustration by John Hersey

Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

with Chris Converse

Video: Adding a wraparound effect to the autoplay

Now in order to add the wraparound effect to our autoplay, we are going to need to go down to the function that we have called autoAdvance and make some changes inside of there. So let's scroll down to near the bottom. We'll see a function called autoAdvance. And so what we are going to do inside of here is first get rid of this conditional statement that checks to see whether the currentPanel equals to totalPanels and then sets the currentPanel to zero. Let's just delete that. What we are going to do instead is inside of this if statement where we check to see if the autoPlay equals true, we are going to put another conditional statement inside of here.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course 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.

Subject:
Web
Software:
Dreamweaver jQuery
Author:
Chris Converse

Adding a wraparound effect to the autoplay

Now in order to add the wraparound effect to our autoplay, we are going to need to go down to the function that we have called autoAdvance and make some changes inside of there. So let's scroll down to near the bottom. We'll see a function called autoAdvance. And so what we are going to do inside of here is first get rid of this conditional statement that checks to see whether the currentPanel equals to totalPanels and then sets the currentPanel to zero. Let's just delete that. What we are going to do instead is inside of this if statement where we check to see if the autoPlay equals true, we are going to put another conditional statement inside of here.

So let's add a few line returns. This statement that already exists which checks the nth-child of the marquee_nav that was clicked and then we run a trigger event on that, we are going to keep this, but this is the animation set we need for a normal animation state. And so in a conditional statement above this, we are going to check to see whether or not we are going from first to last or last to first. So on a line above, we are going to type if, beginning and ending parentheses, beginning and ending bracket. Let's split the brackets open. After the bracket we are going to type else, beginning bracket. And then this is the line we are going to keep, so let's keep that line, and then after we are going to put our ending bracket.

So inside of the parentheses for this if statement, we are going to check to see whether or not we want to change the animation based on, again, whether we are going to first to last or last to first. So inside of the parentheses, we are going to check for window.currentPanel, double equals for absolute the equality with window.totalPanels. So what we are going to do inside of here, let's come down and copy this entire statement in the else area, let's copy that to the clipboard, let's paste it inside if here, and what we want to change in here is instead of calculating the currentPanel plus one, we want to set the nth-child to one.

So let's come in here and select all of the items inside of the parentheses for nth-child. Let's hit Delete and then put a number 1. Now in the autoPlay we only ever have to detect for going from the last item to the first item, because the autoPlay doesn't play in reverse. So here we are checking to see if the currentPanel is at the totalPanels. If it is, we are going to run the animation based on the nth-child of one and then run the click event. Otherwise, we are going to let the current panel decide what the nth-child is and then we'll get our animation between, let's say the third panel and the first panel for example.

So with that change, let's scroll up to the very top. Let's uncomment out our setInterval that we did in the beginning in the movie, just so that this didn't autoplay while we were making our adjustments. Let's hit File > Save and let's go back out to our browser and hit Reload. Now to test this, I am going to move my cursor inside of the marquee. In the earlier versions when we created this course, we actually set the autoPlay to false, so notice when I roll inside of the marquee, we turn off the autoPlay so the user can interact. I am going to come over here and click on the third panel.

I am going to roll my cursor out. We can see the counter starting to count up, autoPlay is true. This will automatically advance to the fourth frame and then once the animation is set to play from the fourth frame to the first frame, we'll see that we get the same animation effect where the animation moves to the left, giving us that wraparound effect. Once the autoAdvance goes again, we'll see that it just continues to keep animating through each one of the individual pieces. And so if we let this autoAdvance just continue to play, the illusion to the users will be that there is just an endless string of photographs that just keep animating one after the other.

So with this point, we have completed adding a wraparound effect to your marquee. In the next movie, we'll talk about where you might want to go from here with this particular project.

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

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.

Join now Already a member? Log in

* Estimated file size

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

Course retiring soon

Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver will be retired from the lynda.com library on March 18, 2015. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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 ?

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.