New Website Themes And Templates every week!

• Products
  RSS feed
• Get'em all
  only $99

Simple Flash Player in Jquery Dialog

• 
  sucka
  on 28/3/10
  Hello,
  dunno why I can't post in other section so I'm trying my luck here. Feel free to transfer it to another section.
  
  I need to display the simple flash player in a jquery ui dialog.
  
  My function:
  
  

                  
  function anhoeren (nummer,ersteller,name) {  
    // JAVASCRIPT VARS
  	// cache buster
  	var cacheBuster = "?t=" + Date.parse(new Date());		
  	
  	// stage dimensions
  	var stageW = 542;//"100%";
  	var stageH = 66;//"100%";
  	
  	
  	// ATTRIBUTES
  	var attributes = {};
  	attributes.id = 'FlabellComponent'+nummer;
  	attributes.name = attributes.id;
  	
  	// PARAMS
  	var params = {};
  	params.wmode = "transparent";
  	params.allowfullscreen = "true";
  	params.allowScriptAccess = "always";			
  	params.bgcolor = "#ffffff";
  	
  
  	/* FLASH VARS */
  	var flashvars = {};				
  	
  	/// if commented / delete these lines, the component will take the stage dimensions defined 
  	/// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml			
  	flashvars.componentWidth = stageW;
  	flashvars.componentHeight = stageH;
  	
  	/// path to the content folder(where the xml files, images or video are nested)
  	/// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
  	flashvars.pathToFiles = "/player/";
  	flashvars.xmlPath = "/xml/settings.xml";
  	
  	// other vars
  	flashvars.artistName = ersteller;
  	flashvars.songName = name;
  	flashvars.songURL = "http://de.needabeat.com/files/beats/klein/"+nummer+".mp3";			
  				
  	
  	/** EMBED THE SWF**/
  	swfobject.embedSWF("/preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "/js/expressInstall.swf", flashvars, params);
    $(document).ready(function() {
  		var $dialog = $('<div></div>')
  
  			.html('<div class="musikprev" id="FlabellComponent'+nummer+'"><p>In order to view this object you need Flash Player 9+ support!</p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/></a></div>')
  	
  			.dialog({
  				autoOpen: false,
  				title: name+' von '+ersteller,
  				width: 550,
  				height: 80,
  			});
   
  			$dialog.dialog('open');
  	});
  }	
  
                  

  
  
  I am opening the function just like that:
  
  

                  
  <a onclick="anhoeren('.$row["id"].',\''.$row_b["derbenutzername"].'\',\''.$row["dername"].'\')" href="#id'.$row["id"].'"><img src="/img/playeinsendung.png" alt="Probehören" title="Probehören" /></a>
  
                  

  
  
  It's in a while loop (mysql)
  
  The dialog opens but the player doesn't show up. No errors from firebug.
  
  Any idea?
  
  Thank you

  reply
• 
  sucka
  on 14/4/10
  no one? Help ^^

  reply
• 
  bobocel
  on 28/4/10
  Hi. Send a link please.

  reply
• 
  sucka
  on 29/4/10
  http://beta.needabeat.com/beats/
  
  You´ll have to look next to the stars (the cd symbols). Onlick opens a dialog with the player inserted, nothing happens though.
  
  Bye

  reply
• 
  sucka
  on 4/5/10
  Got the link?

  reply
• 
  vlad.serban
  on 14/6/10
  hey sucka,
  
  The Flabell flash components are loaded via swfobject (JS function).
  
  The way you wrote the code won't work.
  
  Try this way.
  
  1. Create a php that loads the mp3 player. Something like load.php?songID=123
  
  The php file will have the JS code based on the sondID param
  
  

                  
  attributes.id = 'FlabellComponent<?php echo $_GET['songId']; ?>';
  
  ...
  
  flashvars.songURL = "http://de.needabeat.com/files/beats/klein/<?php echo $_GET['songId']; ?>.mp3"; 
  
  ...
  
  <div class="musikprev" id="FlabellComponent<?php echo $_GET['songId']; ?>"> ... </div>
  
                  

  you can test the php file writting the url in the browser and see if it loads the mp3 player correctly. 2. AFTER THAT, load the jQuery UI dialog telling it to load in the popup div the url ( load.php?songID=123 ). jQuery has a <b>function load</b>. in your case you need to load into the div the contents of the external url.

                  
  var yourDialog = 
  $('<div></div>').load('load.php?songID' + nummer, function(){
      // callback function after the div has loaded the proper html contents with the mp3 player
      // $(this) = the div just created. 
  
      $(this).dialog({
  				autoOpen: false,
  				title: name+' von '+ersteller,
  				width: 550,
  				height: 80,
  			});
  
     $(this).dialog('open');
  });
  
                  

  
  
  I wrote the code on the fly and didn't tested it. But the ideea matters :) Hope you got it.
  
  Good luck !

  reply
• 
  sucka
  on 14/6/10
  Hi,
  
  my load.php:
  
  

                  
  
  <script type="text/javascript" src="/js/swfobject.js"></script>
  <script type="text/javascript">
  
  // JAVASCRIPT VARS
  // cache buster
  var cacheBuster = "?t=" + Date.parse(new Date());		
  
  // stage dimensions
  var stageW = 542;//"100%";
  var stageH = 66;//"100%";
  
  
  // ATTRIBUTES
  var attributes = {};
  attributes.id = 'FlabellComponent<?php echo $_GET['id']; ?>';
  attributes.name = attributes.id;
  
  // PARAMS
  var params = {};
  params.wmode = "transparent";
  params.allowfullscreen = "true";
  params.allowScriptAccess = "always";			
  params.bgcolor = "#ffffff";
  
  
  /* FLASH VARS */
  var flashvars = {};				
  
  /// if commented / delete these lines, the component will take the stage dimensions defined 
  /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml			
  flashvars.componentWidth = stageW;
  flashvars.componentHeight = stageH;
  
  /// path to the content folder(where the xml files, images or video are nested)
  /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
  flashvars.pathToFiles = "/player/";
  flashvars.xmlPath = "/xml/settings.xml";
  
  // other vars
  flashvars.artistName = "<?php echo $_GET['user']; ?>";
  flashvars.songName = "<?php echo $_GET['name']; ?>";
  flashvars.songURL = "http://beta.needabeat.com/files/beats/klein/<?php echo $_GET['id']; ?>.mp3";			
  			
  
  /** EMBED THE SWF**/
  swfobject.embedSWF("/preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "/js/expressInstall.swf", flashvars, params);
  
  </script>
  <div class="musikprev" id="FlabellComponent<?php echo $_GET['id']; ?>"><p>In order to view this object you need Flash Player 9+ support!</p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/></a></div>
  
                  

  My beats.php

                  
  function anhoeren (nummer,ersteller,name) {  
    
    $(document).ready(function() {
  		var $dialog = $('<div></div>').load('/inc/load.php?id='+nummer+'&user='+ersteller+'&name='+name+'&ort=beats', 
  		function(){
      		$(this).dialog({
  				autoOpen: false,
  				title: name+' von '+ersteller,
  				width: 550,
  				height: 80,
  			});
  
     			$(this).dialog('open');
  
  		});
  	});	
  }	
  
                  

  
  
  Doesnt work though ...
  
  Bye

  reply
• 
  sucka
  on 14/6/10
  It works when I type in some words, but not the player. Acts just as it did before...

  reply
• 
  sucka
  on 14/6/10
  It works once on safari. After reopening the dialog nothing happens. Nothing happens on IE, too

  reply
• 
  bobocel
  on 21/6/10
  Fixed. ;)

  reply

Subcribe to topic RSS