Problem with ajax and jquery Reel about reel HOT 5 CLOSED

For the moment I dont know why but add this line after line 157. It's working for me:

if($.reel.instances.length>0) remove_instance($.reel.instances.first());

Excerpt:

on= {
setup: function(e){
/*
- fills up the data storage with values based on options
- binds to ticker
*/
if (t.hasClass(klass)) return cleanup.call(e);
if($.reel.instances.length>0) remove_instance($.reel.instances.first());

from reel.

Works!!!

from reel.

First, Fazeaction,

first of all let me thank you very much! It's pretty cool that you literally found the issue here. I long had no clue what might be wrong with the code, but now I think I'm starting to get it, thanks to you. Your solution very clearly uncovers, that the problems experienced are a logical consequence of not having the instance properly removed from the DOM.

Your solution for this is indeed very right and I can not thank you enough for helping out and bumping me on the right track. It unfortunatelly won't do the trick for multiple Reel instances on the page simultaneously.

Zazoomauro,

The "teardown" event will come handy in situations like these, where you i.e. dynamically dynamically build (and destroy) instances, like loading one Reel in place of another. It removes the existing DOM node and all its data and event bindings by restoring the original image element Reel was built upon. It performs all necessary cleanup for you, including the call to remove_instance for example.

So instead of the proposed Reel modification, putting this:

$('.imageReel').trigger('teardown`)

just before the .load call would be the recommended solution for your code.

Thank you, guys, for cooperating on the solution here on Github :) You both have helped!

from reel.

This issue qualified for frequently asked question and has become part of the FAQ wiki page.

from reel.

Thanks fazeaction, that new line worked for me when loading a Reel instance with ajax on click.

.trigger('teardown') did not work in this case.

from reel.