Open 1pixelout in new window

I like a challenge, and I'm only just getting my head round JavaScript.

I approached this a different way and used Drupal.behaviors to attach the new window behavior to the content.

Drupal.behaviors.swftoolsNewWindow = function (context) {
  
  var openWindow = function(windowHTML) {
    var htmlHeader = 
        "<html>"
      + "<head>"
      + "<title>Audio Player</title>"
      + "</head>"
      + "<body>";
    var htmlFooter = 
        "<p><a href=\"javascript:self.close()\">Close Window</a></p>"
      + "</body>"
      + "</html>";
    newWindow=window.open('','audioWindow','width=310,height=24,toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no');
    newWindow.document.open();
    newWindow.document.write(htmlHeader);
    newWindow.document.write(windowHTML);
    newWindow.document.write(htmlFooter);
    newWindow.document.close();
    newWindow.focus();
  };
  
  $('.new-window:not(.swftools-processed)', context).addClass('swftools-processed').each(function () {
    var markup = $(this).html();
    $(this).html('Open in new window');
    $(this).click(function(){
      openWindow(markup);
      return false;
    });
  });

};

So we use your new window function, but the new part is the jQuery that searches out all content with the class new-window. We store the existing content, switch it for the text "Open in new window", and then assign the click action to the link to open the content in the new window.

So on the page we just have to have

$output = swf('myAudio.mp3');
print '<a href="#" class="new-window">'.$output.'</a>';

I can make it work with direct embedding - the behavior with JavaScript embedding is unpredictable as the replacement seems to kick in under FireFox before the switch occurs.

But other than that it's good, and it is actually pretty neat.

The above can probably be improved, but hopefully this gives you a start!

Oh, and it doesn't work properly under IE, but then nothing ever does! I'll leave that for someone else to figure out!

Genius! I love way support requests get you thinking...

The new SWF Tools module uses a cache to save processing content on every page, and we now serve xml from the cache too.

So... why not serve an html page with just the flash content from the cache.

You go to /mysite/swftools/page/nnnnn where nnnnn is the cid from the cache. You get a page with just your flash.

There is no "real" page, but a page served by Drupal.

Now your problem becomes trivial - no need to worry about document.write() and substituting content, we just call up a reference to the /swftools/page/nnnn page to drop in the new window.

It took me about five minutes to write a basic handler to do this, and a small tweak to the swf() function so it can return the cid.

Now all you'd write on your page is something like

$output = swf('myAudio.mp3', array('othervars' => array('return_cid' => TRUE)));

print '<a href="/swftools/page/' . $output . '" class="new-window">Open in new window</a>';

Then the JavaScript is simply

Drupal.behaviors.swftoolsNewWindow = function (context) {

  $('.new-window:not(.swftools-processed)', context).addClass('swftools-processed').each(function () {
    $(this).click(function(){
      window.open(this.href,'audioWindow','width=310,height=24,toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no');
      return false;
    });
  });

};

And that's it - pop up window! No substitution stuff, nothing on your page except what looks like (and indeed is!) a valid hyperlink.

If I'm right this means we can put stuff in LightBox2 as well. That's what I'm off to test now!

It works with LightBox! I would have posted sooner as it took about two minutes to make it work, but I've been playing!

I know this thread is about opening a new window, but using the same technique you could do something like:

$output = swf('someContent.swf', array('othervars' => array('return_cid' => TRUE)));

print '<p><a href="/swftools/page/' . $output . '" rel="lightframe[flash|width:220px; height:220px;]">Open in LightBox</a></p>';

And you get flash in a lightbox.

Or you can do it via jQuery (but you need to trigger the script again), so

$output = swf('someContent.swf', array('othervars' => array('return_cid' => TRUE)));

print '<p><a href="/swftools/page/' . $output . '" class="swftools-lightbox">Open in modal LightBox</a></p>';

goes on your page, and

Drupal.behaviors.swftoolsNewWindow = function (context) {

  $('.swftools-lightbox:not(.swftools-processed)', context).addClass('swftools-processed').each(function () {
    $(this).attr('rel', 'lightmodal');
  });
  
  Lightbox.initList();

};

goes in the script. Note Lightbox.initList(); to re-trigger attachment of Lightbox behavior to the content.

About six lines of code and you have overlayed flash movies!

I tried this locally and it is awesome (my new favorite word!).

This is going in 6.x-3.x! I need to tidy the code a little bit, but it's all minor stuff!

I want to play a video in Lightbox. I'm able to bring up Flowplayer in Lightbox when click on a thumbnail, but the video is not getting played. The file format is FLV. Here is a link to my test site http://nailsystem.intrapos.com:9898/

I just learned about SWF Tools and it seems that I can accomplish the same with SWF + Flowplayer3. Can you show me what I need to do in my view to get the video clip to play in Flowplayer when click on a thumbnail using SWF?

I was so excited when I found this post. I was sure it had exactly what I was looking for. I have a Drupal 6.x installation, I have SWF Tools installed and I also have the necessary modules for Colorbox installed and working correctly (after some experimentation).

The website I am building broadcasts both audio and video "podcasts".

Let me try and explain...

I have created a new content type using CCK called "Podcast". This content type allows me to add a title to the podcast, add a brief description, select and upload a thumbnail image and select and upload both an .mp3 version of the audio portion of the podcast and an .mov of the full video/audio podcast compressed using the H.264 codec. I am using views to list these "podcasts".

What I want to be able to do is have an image link for each node entry in the Views list which you can click on to play the audio only .mp3 which will overlay a Colorbox and show the 1pixelout player in the Colorbox "window".

With Colorbox installed I can open other html based content using a CSS class in the anchor tag (I can specify the width and height with additional arguments appended to the URL to open). What I want to be able to do is use this method to "open" the .mp3 files to play - only problem is that they are not "HTML" files, but the links to the RAW .mp3's which causes the browsers default handling of .mp3's to kick in and kills the Colorbox effect.

When I saw that you were access the SWF Tools cache to display "pseudo-html" files via their cid I thought this was my solution. Only problem is that I can't seem to figure out how to access these cached files... This folder "/mysite/swftools/html/" does not exist in my site directory structure...

Where do I access these files? Have I forgotten something?

Your help would be greatly appreciated...

This has got me thinking, and while I don't have a definite solution that I've tested I can imagine how you might do it.

At the moment a lot of these features are new so there's not much by way of docs, but the way the "retrieve page from cache" works is that when you call the swf() function you can ask it to return the cid of the content, not the content itself. The path swftools/page isn't a "real" path and there isn't a directory. It's actually a Drupal menu path.

The thing is that to make it work you have call the swf() function to render your audio player and cache it. So, the code in PHP would be something like

$output = swf('someContent.swf', array('othervars' => array('return_cid' => TRUE)));
print '<p><a href="/swftools/page/' . $output . '" class="swftools-lightbox">Open in modal LightBox</a></p>';

The thing is, I can't think of a "clever" way of the top of my head to make that construct via a CCK formatter, but if you're using the new Views capability I think it's actually quite easy.

SWF Tools renders its output via a template called views-view-swftools.tlp.php. The template does some clever stuff to render the fields (we do it in the template to let the playlists be flexible/extensible) but the last statement is the "business end" and it does is

print swf($files, $swftools['options']);

So, if you were to create a custom template for the view you could very easily change that to output a link, with an image, and because we're using Views you can easily pass the appropriate thumbnail.

That way you could quickly/easily build a view that outputs media players as links for a pop-up effect.

I'm working on other stuff at the moment so don't have time to try this, but hopefully this is enough to give some clues!

What's interesting is that this is the second query in as many days that poses a problem that is easily solved with the new Views capability, so that says to me that it was well worth adding that feature at long last!

Note - path is now swftools/page/nnnn

The page is now rendered from a template and this name matches better. Sorry for the change, but this is BETA so I reserve the right to change my mind about stuff :-)

Hi

I´m not able to get this to work. I´m using 6.x-3.0-beta4.

$output = swf('someContent.swf', array('othervars' => array('return_cid' => TRUE)));

The $output variable is not the cid, it is a markup for the swf file.

Can I get some hints??

I'm looking to do something very similar to this, but dynamically building the video out at click-time, and launching using Shadowbox. See my ticket #890618: SWF Tools profile + Views... how to launch Flash video using Shadowbox.