Creating an iframe playlist that loops through urls (from a node field)

Question

Scenario

A content type called "Playlist" exists. Playlist has a text field: field_playlist_sources. When a user creates the Playlist they can add multiple values for field_playlist_sources. Each value is a url like: http://somesite.com.

When the Playlist node is viewed, the field_playlist_sources field is displayed with a Custom Formatter (using the Custom Formatters module). The format for the display of this field is:

<iframe src="" name="frame" id="frame" width="100%" height="1080px" seamless frameborder="0" scrolling="no"></iframe>

Notice the empty src.

What I'd like to do is loop through the values provided for field_playlist_sources within the iframe.

With Javascript this would look like this:

var frameSRC = Array(
  'http://someurl.com', 60,
  'http://anotherurl.com', 60);
var i = 0, len = frameSRC.length;

function ChangeSrc() {
  if (i >= len) { i = 0; } // start over
  document.getElementById('frame').src = frameSRC[i++];
  setTimeout('ChangeSrc()', (frameSRC[i++]*1000));
}

window.onload = ChangeSrc;

As of right now, I'm not sure how to bring in the values from the field to this javascript file. Maybe there is a better approach?

Any help would be greatly appreciated.

Answer 1

I'd probably do this in two steps (all within the formatter hook).

1. Separate the js processing into an external include, added via drupal_add_js();
2. Put the urls into Drupal.settings.mymodule.playlist and call these from your ChangeSrc() function.
3. If you're wanting to do it semantically, skip point 2 and just ouptput <a href="src" data-something="60"> in your formatter markup. Then pull those hrefs with your js and inject them into the iframe.

---

Standard code for including custom js settings:

$settings = array(); $settings['mymodule']['playlist'][] = array('url1','metadata1'); drupal_add_js($settings, 'setting');