Audio-Navigation

[vega]

Hi Leute,

wieder einmal eine Frage von mir. Bei fast allen meinen Websites habe ich immer eine kleine Audio-Navigation in Flash gecodet, die dann den Besuchern eine Auswahl an Musikstücken anbietet oder per Zufallsgenerator abspielt.

Da diese Website die erste ist, bei der ich die Bereiche immer in Unterordnern angelegt habe wie z.B. Portfolio in "portfolio/index.htm", habe ich natürlich eine einheitliche HTML-Seite, die andauernd "da" ist.

Gibt es denn nun eine Möglichkeit ein Flash-Objekt per CSS einzubinden oder über sonst einen Trick?

Wenn ich nämlich das Flash-Objekt jetzt einbinde, wird es ja bei jedem weiteren Klick und Besuch einer neuen Seite immer wieder neu geladen und somit der Loop unterbrochen, bzw. ein neues Lied angespielt. Das wäre mehr als nervig und nicht tragbar für die Besucher.

Vielen Dank im Voraus euch.

[dhx]

Moin,

vega:
wieder einmal eine Frage von mir. Bei fast allen meinen Websites habe ich immer eine kleine Audio-Navigation in Flash gecodet, die dann den Besuchern eine Auswahl an Musikstücken anbietet oder per Zufallsgenerator abspielt.

Redest du hier von einer wirklichen Navigation oder nur von einem (Flash-)Musikplayer? Und warum möchtest du deinen Besuchern überhaupt Musik anbieten?
Musik die im Hintergrund läuft und nix mit dem Seiteninhalt zutun hat giltet als verpönnt.

vega:
Da diese Website die erste ist, bei der ich die Bereiche immer in Unterordnern angelegt habe wie z.B. Portfolio in "portfolio/index.htm", habe ich natürlich eine einheitliche HTML-Seite, die andauernd "da" ist.

Nö eigentlich nicht, aber das hast du ja schon selbst herausgefunden.

vega:
Gibt es denn nun eine Möglichkeit ein Flash-Objekt per CSS einzubinden oder über sonst einen Trick?

Mit CSS garnicht. Ansonsten wären da z.B. die Frametechnik (HTML) oder PHP (per include). Mit Ajax sollte sowas auch möglich sein?

vega:
Wenn ich nämlich das Flash-Objekt jetzt einbinde, wird es ja bei jedem weiteren Klick und Besuch einer neuen Seite immer wieder neu geladen und somit der Loop unterbrochen, bzw. ein neues Lied angespielt. Das wäre mehr als nervig und nicht tragbar für die Besucher.

Die einzige Möglichkeit dir mir da spontan so einfällt wäre ein zweiteiliges Frameset (Teil1 = deine Website, Teil 2 = Flashplayer). -Nicht gerade modern und technisch auf den neusten Stand, aber umsetzbar.

[Azra]

Wie in einem deiner anderen Thread bereits gepostet, ist es wirklich nicht kompliziert eine Ajax Funktion in die Seite einzubinden.
Es ist wohlmöglich die einfachste Variante die du kriegen kannst, und sie steht schon fertig in meinem Post für dich bereit:

http://www.css-info.de/forum/css-fuer-fortgeschrittene-f2/navigation-t3321.html#p8042

[vega]

das war ein versehen: "... natürlich eine einheitliche ..." soll "... natürlich keine einheitliche ..." heißen.

also, das ist ein flash-film (swf), der eben eine audio-navigation darstellt. man kann da lauter/leiser machen, musik stoppen/starten und sich ein stück auswählen.

mit php-include habe ich es versucht, aber das bringt ja nichts, da es dasselbe ist, als ob ich das object direkt einfüge. bei jedem klick auf einen neuen bereich der website wird der flash-film neu geladen und die musik stoppt und beginnt von vorn. schlimmer noch: da ich einen zufallsgenerator in flash programmiert habe, wählt es immer wieder einen neuen track aus und zerstört somit meine schöne loop-funktion.

dasselbe passiert, wenn ich es mit swfobject.js versuche. ich dachte, das würde mir helfen, aber ... nope.

also, dann bleibt nur noch frames oder ajax. frames geht einfach gar nicht (mehr). früher habe ich das so gelöst, aber mittlerweile finde ich das nicht mehr gut.

zu ajax: fremd wie neu-guinea.

sieht das dann so aus?

head:

Code: Alles auswählen

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
   $j(document).ready(function(){
            $j("a").click(function(){
               $j.ajax({
                  url: $j(this).attr("href"),
                  success: function(response) {
                  $j("#content")audio.swf(response);
                  }
               });
         return false;
   });
});
</script>

body:

Code: Alles auswählen

<div id="content"></div>

... und was mache ich mit dem "a"? was hat das mit links zu tun?

... aber wenn ich das auf jeder seite und unterseite meiner website einbaue, habe ich dann nicht den gleichen effekt, als wenn ich es per direkter object-angabe oder php-include (siehe oben) versuche? wird dann nicht auch bei jedem besuch der flash-film geladen und die musik neu gestartet?

danke im voraus.

[Azra]

sieht das dann so aus?

Ja.

...was mache ich mit dem "a"...

Einen Link definierst du doch mit einem <a> - Tag.
Das Script wie es jetzt ist, wirkt sich also auf ALLE Links auf deiner Webseite aus.
Du weisst in CSS wie du einem Objekt bestimmte Werte übergibst, das ist im JavaScript nichts anderes.
Wenn du nur bestimmte Links auf die Funktion zugreifen lassen möchtest, musst du wie in CSS lediglich eine Klasse oder z.B. ul li hinzufügen. (.navigation ul li a) oder (.navigation a)

...wenn ich das auf jeder seite und unterseite meiner website einbaue...

Du machst das einmal, in der index Seite.
In allen Restlichen Seiten kannst du das <html> Gerüst entfernen und beispielsweise "isuhdgiudhfgiuhdfgiu" hineinschreiben.
Wenn der Link auf der index Seite stimmt wird dann in deinem Container (#content) "isuhdgiudhfgiuhdfgiu" eingefügt.
Das heisst, du kannst in den anderen Seiten ganz oben anstatt mit <html> z.B. direkt mit <div> beginnen, um deinem Inhalt auch eine Struktur zu verleihen.

[vega]

ach, shit, ich raff das nicht, zumal ich die letzten 7 tage an meiner website gesessen habe und nun alles wieder umändern müsste? zu quasi einer startseite? ich raff nicht, was dann mit den unterseiten passieren soll. die müssen doch dargestellt werden.

haha, sorry, blicke da NULL durch, aber dann muss ich halt auf die audio-navigation verzichten.

danke dir/euch dennoch.

[Azra]

So ich habe es dir aufgemalt.
[img]
http://web145.omikron.ibone.ch/legatio/ajax.jpg
[/img]

Beachte dass es völlig egal ist ob deine Seiten mit .htm, .html oder .php enden.
In der Index baust du dein Layout auf.
In den Unterseiten fügst du Text und Bilder ein, welche du mit <div> Containern oder Tabellen schön strukturieren kannst.

[vega]

danke dir für die grafik, nun habe ich das "system" gerafft.

übrigens, ist hier in diesem forum jemand, der sich mit php auskennt?

[Azra]

Code: Alles auswählen

jemand, der sich mit php auskennt

Ich

[vega]

o, schön, dann frage ich dich einfach mal direkt, denn von php habe ich keinen blassen schimmer, aber ich glaube, dass man hier nur einen befehl oder parameter ändern muss.

ich benutze ein galerienskript von niklas, was er auch an coder weitergibt (siehe kommentare). im unteren code eben gibt es diese drei großen bausteine und ich vermute, der mittlere teil ist der, der die thumbnails aus bildern generiert.

bei einem aufruf aus einer htm-datei mit

(<?
include("./bolGallery.php");
bolGallery("./images/", 5, 80, 80);
?>

werden eben die thumbnails generiert/angezeigt. soweit klappt alles hervorragend. ebenso auch der zufällig ausgewählte bereich des thumbnails sieht fast immer toll aus.

das problem ist nur, dass ich gern etwas mehr "zoom" vom bild hätte, sozusagen. also, im moment wird ein 80 x 80 pixel großes thumbnail aus einer 1 mb großen datei erstellt. da kann es manchmal sein, dass man einfach nur ein schwarzes thumbnail erhält, da es eine große dunkle fläche im foto gab (himmel, ...).

ich hätte also gern, dass er nicht einfach nur 80 x 80 pixel aus dem bild schneidet, sondern eben etwas mehr aus dem bild "rauszoomt" und dann sein 80 x 80 pixel großes thumbnail schneidet/kreiert. so sieht man mehr vom bild und hat auch auf dem thumbnail eine größere ahnung davon, was man nun eigtl groß klicken wird.

ich hoffe, ich habe das verständnisvoll erklärt. auf dem thumbnail soll man einfach mehr vom bild sehen, ohne natürlich die thumbnail-größe zu ändern.

wäre schön, wenn es dafür eine lösung gibt. danke dir/euch im voraus.

php:

Code: Alles auswählen

// Output array : {image resource, image width, image height}
function getImageResource($imageFile) {

   // Get image info
   $imageFileInfo = getimagesize($imageFile);
   $dataArray[1] = $imageFileInfo[0];
   $dataArray[2] = $imageFileInfo[1];

   // Create a image resource
   if ($imageFileInfo[2] == 1) { $imageFileResource = imagecreatefromgif($imageFile); }
   if ($imageFileInfo[2] == 2) { $imageFileResource = imagecreatefromjpeg($imageFile); }
   if ($imageFileInfo[2] == 3) { $imageFileResource = imagecreatefrompng($imageFile); }
   $dataArray[0] = $imageFileResource;
   
   return $dataArray;
}



// Creates a jpeg image sized as you want focusing randomly at a detail of the reference image
function imageDetailExtract($referenceImage, $thumbnail, $thumbnailWidth, $thumbnailHeight, $thumbnailJpegQuality=70) {

   $getImageResource = getImageResource($referenceImage);
   
   // Method to display a image detail
   // Coders : problems with little images (To get rid of it, set those two variables to 0)
   // Coders : could be also enhanced so as to see more details
   $Xposition = round(rand(0, ($getImageResource[1]-$thumbnailWidth)));
   $Yposition = round(rand(0, ($getImageResource[2]-$thumbnailHeight)));

   // Create the detail image
   $thumbnailResource = imagecreatetruecolor($thumbnailWidth,$thumbnailHeight);
   imagecopy($thumbnailResource, $getImageResource[0], 0, 0, $Xposition, $Yposition, $getImageResource[1], $getImageResource[2]);
   imagejpeg($thumbnailResource, $thumbnail, $thumbnailJpegQuality);
   
   // Destroy image resources
   imagedestroy($getImageResource[0]);
   imagedestroy($thumbnailResource);
}



// Resizes the given image outputting a jpeg image
function resizeImage($referenceImage, $thumbnail, $maxWidth, $maxHeight, $thumbnailJpegQuality=70) {
   
   $getImageResource = getImageResource($referenceImage);
   
   // Recompute size for fitting (to be validated)
   if( $getImageResource[1] > $getImageResource[2]) { $maxHeight = round(($getImageResource[2]/$getImageResource[1])*$maxWidth); }
   else { $maxWidth = round(($getImageResource[1]/$getImageResource[2])*$maxHeight); }

   // Create resized image
   $thumbnailResource = imagecreatetruecolor($maxWidth,$maxHeight);
   imagecopyresized($thumbnailResource, $getImageResource[0], 0, 0, 0, 0, $maxWidth, $maxHeight, $getImageResource[1], $getImageResource[2]);
   imagejpeg($thumbnailResource, $thumbnail, $thumbnailJpegQuality);
   
   // Destroy image resources
   imagedestroy($getImageResource[0]);
   imagedestroy($thumbnailResource);
}

[Azra]

Tut mir leid, dass ich erst jetzt antworte. Gab viel zu tun auf der Arbeit.

etwas mehr "zoom"

Nun, das ist eine sehr gute Frage. Ich müsste selber noch recherchieren ob dies möglich ist.
Zu empfehlen ist meist jedoch die "schrumpfen" Funktion, was aber auch nicht immer optimal aussieht.

"./bolGallery.php"

Ist dies das Script, welches auch unten aufgeführt ist?
Oder gibt es noch ein anderes.

Ansonsten kann ich dir von ganzem Herzen das [url]mediengestalter.info[/url] Forum empfehlen.
Dort gibt es eine Abteilung "Non-Print". Poste dort dein Anliegen in "Programmierung", dann erhältst du fachliche Hilfe. Vielleicht benutzt du auch erst die Forensuche des MGi.

[vega]

also, das galerienskript ist diese eine datei, genau. sie wird über diese zeilen im htm aufgerufen und ist natürlich länger, ich habe nur den wichtigsten teil (für die problematik) zitiert.

es gibt wohl eine "cut"-funktion (gibt auch autocut), mit der das erzielt werden kann, aber ich hab ja keine ahnung davon.

danke, das mgi kenne ich auch schon. werde dort dann mal nachfragen.