Lade...
riptideBig

Musik! Endlich Musik!

by Lie, 26. März 2013

So, jetzt gibt’s auf der Riptide, wie sichs für einen Globetrotterkutter gehört, endlich eine Jukebox. Man kann sich das hier rechts oben unter „Musik“ anhören. Wird nicht jedermanns Geschmack treffen, deshalb ist es auch optional. Falls irgendjemand eine ähnlich „russische“ Lösung für seine Seite in jQuery braucht – das ganze in ein Textwidget und ein paar Playlists anlegen voilà:

<div id="player">
<li id="player-menu" style="list-style-type: none;">
  <a href="#">Stil wählen:</a>
  <a href="#"><span id='hover-target'>Stil wählen:</span></a>
  <ul class="dropdown-1" style="list-style-type: none;"
    <!--add an arbitrary numbre of li's here - id it with playlist ids from youtube then you're all set -->
    <li id="PLAZs2sfEW57_dShgci9Tq77r1B1YqkSi7"><a href="#">Langsam</a></li> 
    <li id="PLAZs2sfEW57-fCdFuqs2NnvJndrc0GRDC"><a href="#">Schnell</a></li>
    <li id="PLAZs2sfEW57_AxxFDYK3440aYp1rjyhHe"><a href="#">Riptide Videos</a></li>
  </ul>
</li>
</div>
<script>
//simple hack to get a random start position
//beware no-conflict-mode in wordpress
var $jq=jQuery.noConflict();
var Playlist = 'PLAZs2sfEW57_dShgci9Tq77r1B1YqkSi7';
function SetPlaylist(Playlist) {
	var min = 0;
        //youtube will handle indexes out of range without even burping
	var max = 90;
	var random = Math.floor(Math.random() * (max - min + 1)) + min;
   	$jq('#player').append('<iframe id="playerframe" width="200" height="200" src="http://www.youtube.com/embed/videoseries?list='+Playlist+'&index='+random+'" frameborder="0" allowfullscreen></iframe>');
        }
SetPlaylist(Playlist);
$jq(function(){
  $jq('.dropdown-1').hide();
  $jq('#hover-target').hover(function(){
        $jq('.dropdown-1').slideDown('medium').delay(2000).fadeIn(2000);
  }, function(){
        $jq('.dropdown-1').slideUp('medium').delay(2000).fadeOut(2000);
  });
})
$jq(".dropdown-1 li").not('.emptyMessage').click(function() {
       $jq('#playerframe').remove();
       SetPlaylist(this.id);
});
</script>

2 Kommentare


    • Ronald
      Antworten Abbrechen
    • März 26, 2013

    russisch? Inwiefern?

    • Lie
      Antworten Abbrechen
    • März 26, 2013

    Funktionierend, dabei aber nicht schön und ohne Rücksicht auf Verluste. Nicht politisch korrekt. Österreichischer Slang.

Kommentieren

Die Emailadresse wird nicht veröffentlicht

Diese HTML tags können sie verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>