✔ Webbanner mit PHP und JavaScript

D

DJTommyB

Grünschnabel
Hallo!

Hoffe dass ich hier richtig bin, ich poste einfach mal mein Anliegen ;)

Ich möchte auf meiner HP oben links einen Webbanner erstellen, der mir URL's und Links aus der MySQL holt, und diese mittels JavaScript einblendet, nach links verschiebt, kurz verweilt und so weiter, quasi als Do4ever.

Leider hab ich von JavaScript keine Ahnung, PHP und MySql dagegen sind nun gar kein Problem.

Kann mir da vielleicht jemand bei helfen? Wär euch sehr dankbar ;)

mfg
Tommy
 
Hi,

wenn du keine Ahnung von JS hast, solltest du am besten auf ein Framework und ein dazugehöriges PlugIn zurückgreifen. jQuery mit jquery.cycle wäre hier gut geeignet.

Um die Bilder und Links aus einer Datenbank zu holen, wirst du mit Ajax arbeiten müssen. Die notwendigen Funktionen stellt dir das Framework bereits zur Verfügung (Stichwort jquery.ajax).

Die zurückgelieferten Daten (Bildquelle und Link) können in der callback-Funktion before des PlugIns verarbeitet werden.

Ciao
Quaese
 
Quaese hat gesagt.:
Hi,

wenn du keine Ahnung von JS hast, solltest du am besten auf ein Framework und ein dazugehöriges PlugIn zurückgreifen. jQuery mit jquery.cycle wäre hier gut geeignet.

Um die Bilder und Links aus einer Datenbank zu holen, wirst du mit Ajax arbeiten müssen. Die notwendigen Funktionen stellt dir das Framework bereits zur Verfügung (Stichwort jquery.ajax).

Die zurückgelieferten Daten (Bildquelle und Link) können in der callback-Funktion before des PlugIns verarbeitet werden.

Ciao
Quaese
Zum Vergrößern anklicken....

Wieso brauch ich Ajax um die Bilder und URL's aus der DB zu holen?

Ich stell mir das ganze "einfach" so vor:

HTML: 
var banners = [
	<? 
        for($i=0; $i<mysql_num_rows[$query];$i++)
             {
             ?>
              new banner('<?=mysql_fetch_assoc['Description']?>','<?=mysql_fetch_assoc['URL']?>','<?=mysql_fetch_assoc['Picture']?>')
             <?
       }
       ?>
]
Sowas in der Art wie hier gezeigt: http://www.spyka.net/files/simple-banner-rotator-1.4.0/example-basic.html Nur eben vielleicht mit etwas mehr Bewegung drin.

Sollte doch funktionieren oder?
 
Hi,

ich bin davon ausgegangen, dass du die Inhalte (Bildquellen, Links) einfügen möchtest, während das Dokument bereits angezeigt wird. Deshalb der Hinweis auf Ajax.

Aber wie auch immer - du kannst ja das von mir beschriebene PlugIn unter jQuery dennoch verwenden. Demos gibts auf der Seite ja genug.

Kleines Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.pics {
    height:  252px;
    width:   232px;
    padding: 0;
    margin:  0;
}

.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}
 //-->
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cycle.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('#slide_id').cycle({
    fx: 'scrollLeft',
    timeout: 5000
  });
});
 //-->
</script>
</head>
<body>

<?php
$arrSQL = array();
$arrSQL[] = array('src'=>'bild1.gif', 'link'=>'http://www.tutorials.de/', 'descr'=>'Beschreibung 1');
$arrSQL[] = array('src'=>'bild2.gif', 'link'=>'http://www.quaese.de/', 'descr'=>'Beschreibung 2');
$arrSQL[] = array('src'=>'bild3.gif', 'link'=>'http://www.canvas.quaese.de/', 'descr'=>'Beschreibung 3');
$arrSQL[] = array('src'=>'bild4.gif', 'link'=>'http://www.progressorium.de/', 'descr'=>'Beschreibung 4');
?>
<div class="pics" id="slide_id">
<?php
for($i=0; $i<count($arrSQL); $i++){
  echo("    <div><span>".$arrSQL[$i]['descr']."</span><br><a href=\"".$arrSQL[$i]['link']."\"><img src=\"".$arrSQL[$i]['src']."\" width=\"200\" height=\"200\" /></a></div>\n");
}
?>
</div>
</body>
</html>

Das Beispiel sollte derart anzupassen sein, dass damit dein Vorhaben umzusetzen ist.

[offtopic]
Anmerkung zu
Sollte doch funktionieren oder?
Zum Vergrößern anklicken....
Wenn du die Links meines ersten Beitrags angesehen und dich nicht nur am Ajax-Vorschlag aufgehalten hättest, wäre dir sicherlich nicht entgangen, dass soetwas funktionieren kann.

Das musste ich jetzt noch loswerden ...
[/offtopic]

Ciao
Quaese
 
Hi!

Hab das nach einigem hin und her wunderbar mit JQuery.Cycle hin gekriegt, danke vielmals für den Link ;)

mfg
Tommy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück