Quickie: You Tube-Karussell

Als erstes kuemmern wir uns erstmal um die Inhalte.
Hier erzeugen wir einen Header, einen Container fuer ein Vorabbild und unsere Liste mit youtube Videos, die eigentlich nur eine Liste von Bildern ist.
Html:
<div id="page-wrap">
   <header>
      <h3>It's buggy right now!</h3>

   </header>
   <figure id="show_me">
     <img class="hide" style="width: 480px; height: 385px;" src="http://i46.tinypic.com/20jg6cg.jpg" alt="default picture">

   </figure>
   <nav class="yt_menu">
      <ul id="miniImg" class="yt_menu">
         <li><a><img id="6mxzBYuZ5wE" src="http://img.youtube.com/vi/6mxzBYuZ5wE/default.jpg"/></a></li>
         <li><a><img id="WnciA7vP2a4" src="http://img.youtube.com/vi/WnciA7vP2a4/default.jpg"/></a></li>
         <li><a><img id="7VpBbh9nSWs" src="http://img.youtube.com/vi/7VpBbh9nSWs/default.jpg"/></a></li>
         <li><a><img id="H7JxUcmn6Q8" src="http://img.youtube.com/vi/H7JxUcmn6Q8/default.jpg"/></a></li>
         <li><a><img id="W2Hr27zmbHo" src="http://img.youtube.com/vi/W2Hr27zmbHo/default.jpg"/></a></li>
         <li><a><img id="mm38I6GhLIQ" src="http://img.youtube.com/vi/mm38I6GhLIQ/default.jpg"/></a></li>
         <li><a><img id="KkezNWVd_jA" src="http://img.youtube.com/vi/KkezNWVd_jA/default.jpg"/></a></li>
         <li><a><img id="uCz1TSkuQyc" src="http://img.youtube.com/vi/uCz1TSkuQyc/default.jpg"/></a></li>
         <li><a><img id="TlpRYO2EKww" src="http://img.youtube.com/vi/TlpRYO2EKww/default.jpg"/></a></li>
      </ul>

   </nav>

</div>

In unserer Liste mit den You Tube-Bildern, die wir ueber den allgemeingueltigen Pad "http://img.youtube.com/vi/[Video ID]/default.jpg", wobei Video-ID fuer die ID des Videos steht, die ihr im Adressfeld seht:
[img]http://localhostr.com/files/d37022/addressbar.png[/img]
Ich habe hier die Video ID mit einem gelben Hintergrund markiert.
Wir setzten auch bei der ID im Bild die Video ID, denn die wird spaeter noch mal entscheidend.

So jetzt, gehen wir weiter zu ein bisschen Visuelergestaltung ueber...
Html:
<style><!--
div, ul {margin: 0; padding: 0}
body { 
   text-align: center; 
   background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;
   font:13px/1.231em 'Arial';
 }
   
section, article, nav { display: block; }
         
div#page-wrap {
   margin: 0 auto;
   width: 588px; 
   padding: 0 5px;  
   border: 1px solid #000; 
   border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

nav.yt_menu { 
   position: relative; 
   height: 110px; 
   width: 590px; 
   overflow: auto;  
   padding: 10px 0; 
   margin-bottom: 8px; 
   clear: left; 
}       

li { list-style: none; display: inline; } 
ul.yt_menu { 
   height: 110px;  width: 1288px;  
   padding: 12px 0 0 5px;
   text-align: center; 
   background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;
} 
.yt_menu li a { float:left; padding: 0 4px; }
.yt_menu img { 
   border: 3px #fff solid; 
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;  
   padding: 0 5px; 
}
.yt_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; }
--></style>

Zuerst Nullen wir die Abstaende von Divisionen und ungeordneten Listen.
Ordnen dem Body neben einer allgemeinen Schriftart und einem Hintergrund und gestalten unseren Text mittig.
Jetzt, registrieren wir noch einige neue Elemente aus HTML5.

Einen Container, der unsere Inhalte umschliesst, wollen wir zentrieren, dafuer brauchen wir eine entsprechende Breite, die Urspruenglich 600px sein soll. Da wir aber noch mal einen 5px Inennabstand zu den Seiten wollen und einen Rahmen, drum herum, muessen wir von den 600px - ( 2 x [ 5px + 1px ) abziehen, was einer errechneten Breite von 588px fuer unseren Container entspricht. Jetzt noch ein bisschen CSS 3 - abgerundete Ecken und der Container ist fuer's erste fertig.

Jetzt kuemmern wir uns um die Navigationsleite, in der die Youtube Bilder angezeigt werden, die uns beim Klick das entsprechende Video anzeigen. Da die Liste meist groesser werden wird als unser Viewport dafuer zulaesst ( Viewport meint in diesem Fall, die zu sehenden Bilder innerhalb der 588px ) wollen wir einen overflow, geben dem ganzen, zwecks besserer Optik noch ein bisschen was an Innen- und Aussenabstaenden und ein clear, da wir die Listenelemente noch floaten muessen, damit sie in der Horizontalen angezeigt werden.

Jetzt kommen wir zum Interessanten Teil.
Code:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Die erste Anweisung, registiert die HTML5 Elemente auch im Internetexplorer.
In der zweiten Anweisung laden wir unser JavaScript Framework jQuery.
Uns schreiben jetzt selber noch ein bisschen JavaScript, mithilfe von jQuery
Warnung! Spoiler!

Html:
<script><!--
   $(function(){
      var youtubesrc = $('#miniImg>li>img').attr('src');

      $("#miniImg img").click(function(){
         var youtubeID = $(this).attr("id");
         $('.hide').fadeOut();
         $("#show_me").empty();
         $("#show_me").append("<object width='588' height='385'><param name='movie' value='http://www.youtube.com/v/"+youtubeID+"'></param><embed src='http://www.youtube.com/v/"+youtubeID+"' type='application/x-shockwave-flash' width='588' height='385'></embed></object>").fadeIn();
      });

      var div = $('nav.yt_menu'), ul = $('ul.yt_menu'), ulPadding = 15;
      var divWidth = div.width();
      div.css({overflow: 'hidden'});
      var lastLi = ul.find('li:last-child');

      div.mousemove(function(e){
         var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
         var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
         div.scrollLeft(left);
      });
   });
--></script>

Wir registieren erstmal eine Variable, damit wir nicht immer den vollen Selektor ausschreiben wollen.
var youtubesrc = $('#miniImg>li>img').attr('src'); < damit sagen wir, dass von allen Bildelementen, die in der Liste mit dem ID-Selektor [miniImg] vorzufinden sind, die Uri haben wollen und das Ganze als Variable youtubesrc ausgezeichnen moechten.

Jetzt wenden wir einen sog. Klick-Event auf alle Bilder an ( $("#miniImg img").click(function(){ ).
Wir notieren uns noch mal eine Variable in der wir den ID-Selektor der Bilder haben wollen ( var youtubeID = $(this).attr("id"); ), was noch mal zur Erinnerung, die Youtube-Video-ID ist und gehen weiter in dem wir das Bild, das wir vorab schon dort drin haben, wo wir spaeter die Videos angezeigt bekommen wollen. Jetzt kontrollieren wir noch mal den Container, in dem wir unsere Videos haben wollen und leeren ihn, sollte sich noch etwas darin befinen ($("#show_me").empty();).

Jetzt wollen wir, nachdem wir uns vergewissert haben, dass in unserem Videocontainer nichts mehr drin ist, das Video einbinden ( $("#show_me").append(" ). Das Video fuegen wir ganz normal ein allerdings muss sich die URI des Videos bei jedem Klick auf die verschiedenen Bilder entsprechend aendern. Wisst ihr, wir haben uns die URI ja schon als Variable youtubeID gespeichert. Demzufolge brauchen wir nur noch folgendes:
Warnung! Spoiler!
<object width='588' height='385'><param name='movie' value='http://www.youtube.com/v/"+youtubeID+"'></param><embed src='http://www.youtube.com/v/'"+youtubeID+"' type='application/x-shockwave-flash' width='588' height='385'></embed></object>").fadeIn();


Der Rest des Scripts, rechnet im Prinzip nur die Breite aus, um es wie ein HoverMenue aussehen zu lassen.
Hier noch mal eine Zusammenfassung des Ganzen:
Warnung! Spoiler!
Html:
<style><!--
   div, ul {margin: 0; padding: 0}
   body { text-align: center; background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;background: -moz-linear-gradient(center bottom,rgb(232, 215, 247)) 11%,rgb(248, 240, 255) 30%,rgb(240, 243, 255) 79%);background: -moz-linear-gradient(19% 75% 90deg,#E8D7F7, #F0F3FF, #F8F0FF 100%);font:13px/1.231em 'Arial'; }
   section, article, nav { display: block; }
         
   div#page-wrap {padding: 0 5px; text-align: center; width: 588px;margin: 0 auto; border: 1px solid #000; border-radius: 10px; -moz-border-radius: 10px;}
         
   ul {padding-left: 0;}
   li { list-style: none; display: inline; } 
         
   nav.yt_menu { position: relative; height: 110px; width: 590px; overflow: auto;  padding: 10px 0; margin-bottom: 8px; clear: left; }
   ul.yt_menu { display: block; height: 110px; width: 1288px;  padding: 12px 0 0 5px; text-align: center; 
                background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;
                background: -moz-linear-gradient(center top, rgb(232, 215, 247)) 10%, 
                                                                rgb(248, 240, 255) 15%,
                                                                rgb(240, 243, 255) 30%);
                 } 
   .yt_menu li a { float:left; padding: 0 4px; }
         
   .yt_menu img { border: 3px #fff solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 0 5px; }
   .yt_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; }
--></style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="page-wrap"><header><h3>It's buggy right now!</h3></header><figure id="show_me"><img class="hide" style="width: 480px; height: 385px;" src="http://i46.tinypic.com/20jg6cg.jpg" alt="default picture"></figure><nav class="yt_menu"><ul id="miniImg" class="yt_menu"><li><a><img id="6mxzBYuZ5wE" src="http://img.youtube.com/vi/6mxzBYuZ5wE/default.jpg"/></a></li><li><a><img id="WnciA7vP2a4" src="http://img.youtube.com/vi/WnciA7vP2a4/default.jpg"/></a></li><li><a><img id="7VpBbh9nSWs" src="http://img.youtube.com/vi/7VpBbh9nSWs/default.jpg"/></a></li><li><a><img id="H7JxUcmn6Q8" src="http://img.youtube.com/vi/H7JxUcmn6Q8/default.jpg"/></a></li><li><a><img id="W2Hr27zmbHo" src="http://img.youtube.com/vi/W2Hr27zmbHo/default.jpg"/></a></li><li><a><img id="mm38I6GhLIQ" src="http://img.youtube.com/vi/mm38I6GhLIQ/default.jpg"/></a></li><li><a><img id="KkezNWVd_jA" src="http://img.youtube.com/vi/KkezNWVd_jA/default.jpg"/></a></li><li><a><img id="uCz1TSkuQyc" src="http://img.youtube.com/vi/uCz1TSkuQyc/default.jpg"/></a></li><li><a><img id="TlpRYO2EKww" src="http://img.youtube.com/vi/TlpRYO2EKww/default.jpg"/></a></li></ul></nav></div>
<script type="text/javascript"><!--
   $(function(){
      var youtubesrc = $('#miniImg>li>img').attr('src');

      $("#miniImg img").click(function(){
         var youtubeID = $(this).attr("id");
         $('.hide').fadeOut();
         $("#show_me").empty();
         $("#show_me").append("<object width='588' height='385'><param name='movie' value='http://www.youtube.com/v/"+youtubeID+"/&autoplay=1'></param><embed src='http://www.youtube.com/v/"+youtubeID+"&autoplay=1' type='application/x-shockwave-flash' width='588' height='385'></embed></object>").fadeIn();
      });

      var div = $('nav.yt_menu'), ul = $('ul.yt_menu'), ulPadding = 15;
      var divWidth = div.width();
      div.css({overflow: 'hidden'});
      var lastLi = ul.find('li:last-child');

      div.mousemove(function(e){
         var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
         var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
         div.scrollLeft(left);
      });
   });
--></script>


Das war es also!
Ein Livebeispiel, koennt ihr unter aboleos HP sehen.
Viel Spass damit.


Bearbeitet von Scnappi (26.05.2010, 13:23:30)
Bearbeitungsgrund: Topic angepasst.