Hi all,
I transfered a .swf to Html5 (with google swiffy) and added it to a node . It shows just fine in my browser, so it is working.
But when I add it to popup with colorbox-node, nothing appears. I see the trobber just before the body gets blank.

The version is 7.x-2.6

Any suggestions ? Thanks .

CommentFileSizeAuthor
ScreenShot007.gif29.03 KBmorybel
ScreenShot008.gif46.87 KBmorybel

Comments

iLLin’s picture

iLLin commented
Category: bug » support
Priority: Major » Minor

I would imagine that there is some javascript that needs to be called once the node loads. You need to make sure that JS is being called.

morybel’s picture

morybel commented

Thanks iLLin,
Would you be willing to explain me how I do that? I'm not a coder (but a quick learner) and really don't know where to go from here.

Thank you very much for any help.

iLLin’s picture

iLLin commented

How did you add the swiffy thing to the node? Whats the code look like? Maybe search swiffy in a lightbox/modalbox/colorbox and see if others have a similar problem with a solution.

morybel’s picture

morybel commented

This is the actual link behind the popup

<p><a class="colorbox-node" href="/oph/en/node/2492?width=700&amp;height=700"><img src="/oph/sites/default/files/les_modules/en/module01/images/pic013.gif" style="width: 205px; height: 215px;" /></a></p>

If I right-click on that link and choose "open in a new tab", I can actually see the swiffy html 5 anination just fine. But when I click on my popup to open with colorbox-node, it is blank

The code behind the node start with:
<script src="https://www.gstatic.com/swiffy/v5.1/runtime.js"></script>
and ends with: 

<style type="text/css">html, body {width: 100%; height: 100%}
</style>
<div id="swiffycontainer" style="width: 450px; height: 578px">&nbsp;</div>
<script>
      
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                                   swiffyobject);
      
      stage.start();
    </script>

The swiffy conversion itself is way to long to copy here.

There is however an error in my firebug

Uncaught ReferenceError: swiffy is not defined

morybel’s picture

morybel commented

This is the actual link behind the popup

<p><a class="colorbox-node" href="/oph/en/node/2492?width=700&amp;height=700"><img src="/oph/sites/default/files/les_modules/en/module01/images/pic013.gif" style="width: 205px; height: 215px;" /></a></p>

If I right-click on that link and choose "open in a new tab", I can actually see the swiffy html 5 anination just fine. But when I click on my popup to open with colorbox-node, it is blank

The code behind the node start with:
<script src="https://www.gstatic.com/swiffy/v5.1/runtime.js"></script>
and ends with: 

<style type="text/css">html, body {width: 100%; height: 100%}
</style>
<div id="swiffycontainer" style="width: 450px; height: 578px">&nbsp;</div>
<script>
      
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                                   swiffyobject);
      
      stage.start();
    </script>

The swiffy conversion itself is way to long to copy here.

There is however an error in my firebug

Uncaught ReferenceError: swiffy is not defined

morybel’s picture

morybel commented

oups, sorry about the double reply.

iLLin’s picture

iLLin commented

I would try two things.

Wrap your var stage JS in a DOC Ready block.
Or add the runtime.js file to the head for all pages and see if that works since its already loaded.

morybel’s picture

morybel commented

wrapping in DOC ready did not solve the problem, nor adding the js in the head. It broke my site instead. :-s

I found a "partial" solution to the problem however here: http://drupal.org/node/1207420, but not the best practice I would say.

My entire site is linked with colorbox-node so choosing another popup engine (lightbox or else) is out of questions. I have 1000 pages in 2 languages and 500 popups at least.

If you do have other suggestions I'm a taker. :-)
Thank you very much for your help, It's greatly appreciated.

iLLin’s picture

iLLin commented

I used the resources in that thread for a test. Now, it still shows up blank (dunno if they did theirs right or not) but it did write all the containers to the container. You can use it to test some more.

drupal_add_js('http://www.gstatic.com/swiffy/v1/runtime.js');
drupal_add_js('http://www.robives.com/swiffy/peaucellier.swiffy');

  $markup = '<div id="html5"></div><script type="text/javascript">
    (function ($) {
      setTimeout(function() {
        var cbox = document.getElementById("html5");
        var stage = new swiffy.Stage(cbox, swiffyobject);
        stage.start();
      }, 1000);
    })(jQuery);
    </script>';

  return $markup;
iLLin’s picture

iLLin commented

This Worked:

drupal_add_js('https://www.gstatic.com/swiffy/v5.1/runtime.js');
  drupal_add_js('test.swiffy');

  $markup = '<div id="html5"></div><script>
    setTimeout(function() {
      var stage = new swiffy.Stage(document.getElementById("html5"), swiffyobject);
      stage.start();
    }, 1000);
    </script>';

  return $markup;

I copied the swiffyobject into my own test.swiffy from this page.
https://swiffypreviews.googleusercontent.com/view/gallery/example1_swiff...

I think the key is the setTimeout function. It needs to fire AFTER you download the runtime.js file. Maybe you should host that file locally.

morybel’s picture

morybel commented

OK, I will try that. Not very fond of iframe. This sounds better.
Thank you. I'll be back with the results.

iLLin’s picture

iLLin commented
Status: Active » Closed (works as designed)