Swap Out Reel In Same Div / DOM Control And Reel Abort

[IsraelThompson]

I'm trying to entertain a "stage" area inside of a single div and replace the reel inside the div with a different reel when a link is clicked. I am passing all the correct parameters to the reel tag and the img and div elements seem to be altered by reel, but the reel never initiates.

So here is the issue:

1. Reel plays fine onload for the initial instance
2. When the div playing the reel is wiped of it's div, img, div, img (reel elements) and replaced with a new img and reel re-initiated with the new img info, the reel replaces the dom elements like it normally does and you can see the first frame of the reel, but it never starts playing.

What am I doing wrong?

Is there a way to abort or stop a reel from controlling a particular img and swap in another one with a new src, size, and other parameters?

I noticed on your sampler page, you have to "click to activate"... I guess this is similar behavior I'm attempting.

Izz

[IsraelThompson]

Hah! NVM, I think I've got it!

I needed to use $('#element').trigger('teardown'), then simply load the new $('#element').reel(options)... I bet there was something binded, that I was missing!

Izz

[pisi]

Hey Izz!

Great job figuring it out! Honestly. This is a fairly frequently asked question and not many can answer it by themselves, like you. And you are precisely right. I added this question & answer to the FAQ wiki and reposting it below to provide some explanation on what's happening there.

.pisi

When I manually remove the DOM node Reel is running in, I’m then unable to initialize another Reel in the same place. Am I doing something wrong?

Not really. Let me explain. Reel maintains a list of its instances in the document (you can peek in it in $.reel.instances). The direct removal of the DOM node does indeed kill the running instance, but doesn’t clear the record from this list, and its ongoing presence then prevents you from re-initializing the instance. Make sure to .trigger("teardown") event on the instance first. The “teardown” event effectively tears down the running Reel instance structure along with the list entry and reconstructs the original naked IMG node. Then, you can switch the node’s src and do .reel() all over again.