Slideshow mit Javascript

Rausch

Hi Leute,

Ich suche ein Code für eine Slideshow die folgende Eigenschaften haben muss. Die Bilder sollen automatisch ablaufen und für 2 sekunden angezeigt werden und dann halt das nächste kommen ohne das man was klicken muss.

So aber auf der andere Seite sollen die Bilder auch manuell gesteuert werden. Also das ich zwei Buttons habe wo man auch die Bilder steuern kann, also durch klicken das nächste aufrufen.

Ich habe schon mal im Internet gesucht und nur skripte für eins der beiden formen gefunden.. Aber ich brauche halt die beiden Eigenschaften in einem Skript... Ich hoffe ihr könnt mir helfen und evtel mir ein Code posten, weil ich habe null plan von Js..

grüße Rausch

synaptic

kümmere ich mich heute abend drum, wenn ich zu hause bin

Rausch

THX das ist super von dir

Jan_K

das hier hatte ich mal irgendwann geschrieben, läuft auch.
bilder laufen halt default erstmal durch, gibt ne play/pause-taste und skip-buttons(vor(zurück):

PHP

<html>
<head>
<title></title>
<script language='javascript' type='text/javascript'>
<!--
<?php


include("dbconnect.php");


$sql = "SELECT name FROM bilder ORDER BY id DESC";
$result = mysql_query( $sql );
$count = mysql_num_rows( $result );


echo "var bilder = new Array();";


$i = 0;


for( $j = 0; $j < $count; $j++ )
{
         $row = mysql_fetch_array($result);
         if( $i == 0 )
         {  $startbild = $row['name'];  }
         $i++;
         echo "bilder[".$i."]='bilder/".$row['name']."';";
}


echo "var i = 1;";
echo "var aktiv = window.setInterval('vor()', 2000);";
echo "function play()";
echo "{";
echo "	      window.clearInterval(aktiv);";
echo "         aktiv = window.setInterval('vor()', 2000);";
echo "}";
echo "function stop()";
echo "{";
echo "	      window.clearInterval(aktiv);";
echo "}";
echo "function vor()";
echo "{";
echo "         if ( i == ".$i." )";
echo "         { i=1; }";
echo "         else";
echo "         { i++; }";
echo "         document.images[0].src = bilder[i];";
echo "}";
echo "function zurueck()";
echo "{";
echo "         if ( i == 1 )";
echo "         { i=".$i."; }";
echo "         else";
echo "         { i=i-1; }";
echo "         document.images[0].src = bilder[i];";
echo "}";


?>
//-->
</script>
</head>
<body>
<div class="center">
<table border="0" cell-spacing="0" cell-padding="0">
  <tr>
    <td rowspan="2" class="left">


    </td>
    <td class="right_top">
      <?php
      echo "[img]bilder/".$startbild."[/img]";
      ?>
    </td>
  </tr>
  <tr>
    <td class="right_bottom">
      [url='JavaScript:zurueck()'][img]pics/back.jpg[/img][/url]
      [url='JavaScript:stop()'][img]pics/stop.jpg[/img][/url]
      [url='JavaScript:play()'][img]pics/play.jpg[/img][/url]
      [url='JavaScript:vor()'][img]pics/forward.jpg[/img][/url]
    </td>
  </tr>
</table>
</div>
</body>
</html>

Alles anzeigen

Rausch

wow danke werde es daheim gleich mal einsetzen.

synaptic

dann brauch ich heute net mehr scripten?

Rausch

naja doch ich würde gere was kleiners haben xD mit erklärung wo ich was rein schreiben muss.. fühle mich gerade bisschen überfordert mit dem script da es auch php ist...

Jan_K

hehe, naja die bilder werden da halt aus einer datenbank ausgelesen, daher auch php/mysql.
kann dir das auch in eine php-freie version umschreiben und dann sagen wo du was einsetzen mußt. Das aber erst nachher irgendwann nach feierabend

ich lass aber auch gern synaptic den vortritt wenn er gern scripten möchte

synaptic

joa mir is des egal...
nur sollte sich letztlich einer dransetzen dem Rausch zu helfen!
Rausch, mach mal bitte nen ordner klar, wo so´n paar bilder drin sind, die du sliden lassen willst, damit man es etwas leichter wird...
mit eigenen picture-dummies is des nich zwingend ratsam.. denn letzlich wäre es mir wichtig mit den originalen zu arbeiten..
willst du auch noch was mit thumbnails oder nur die galerie?

Rausch

ja ich habe gerade gesehen ich habe noch mehrere Probleme... mit dem mouseover efekt da funzt irgendwas nicht richtig... na ja. Wenn heute Abend eine Zeit hat und das mit mir durch gehen würde bzw mir helfen würde das mit der slideshow zu machen.. kriegt ihr ein stück Kuchen oder bier wie ihr wollt xD..

Ne aber mal ernsthaft würde mich echt freuen wenn einer von euch beiden mir das gerade auf Js umschreiben kann und mir dann heute Abend helfen kann das einzubinden und vielleicht noch mal über den mouseover zu gucken. Wenn es hilft lade ich nachher die Seite noch hoch.

gruß Rausch

synaptic

ja komm nach wehrheim(taunus/hessen), dann klappt dat mit kuchen und bier
wie gehabt mach mal nen online zugänglichen ordner mit bildern klar... hängt nämlich davon ab ob du nur horizontale oder vertikale bilder hast, wie ich das realisieren würde, JS hat da ja nur begrenze möglichkeiten...

Rausch

ja das Prob ist nun folgendes die bilder stehen noch nicht fest aber ich denke es wird nur auf horizontale bilder hinaus laufen.

Was mir aber gerade schwere im magen liegt ist der verdammte mousover efekt o.O.. ich verstehe es halt nicht ^^warum der aufeinmal nicht mehr geht.. na ja liegt wahrscheinlich an CSS.

Ja den ordne lade ich nachher wenn ich daheim bin hoch. Komme hier mit mein schleppi nicht ins w-lan rein. Link würde ich dir per icq schicken ? oder skype.. wäre mir lieber^^ da mein mac und icq sich nicht so sonderlich gut verstehen^^.

synaptic

meine mail is synaptic ät arcor.de.. icq haste ja im profil von mir gibt ja auch icq2go...^^

und der mouseover-effekt is so ne sache wenn der mit css realisiert wird..

ich hab da mal zwei galerien gemacht.. die eine is für jemanden ausm forum hier gewesen, die andere is noch in testphase aber auf eis zur zeit noch.. ich verlink mal alles was galeriestyle hat^^
hier mal die links:
http://home.arcor.de/synaptic/hilfe/js_gal/gallery.html
http://home.arcor.de/synaptic/hilfe/js_gal/js_gal.html (noch in testphase)

http://home.arcor.de/synaptic/hilfe…erysneeker.html (kann man prima fortlaufend nummerierte bilder mit surfen zB *orn^^, ist aber nicht perfekt)

http://home.arcor.de/synaptic/hier/wallpaper.html

http://home.arcor.de/synaptic/hilfe/galerie.html (etwas tricky- einfach mal auf die bilder klicken oder doubleklick)

Rausch

Mhh sorry das ist aber nicht das was ich suche ich habe es dir gerade mal aufgemalt... (ja ich habe wirklich nix anderes zutun gerade :D).

Also ich habe schon einen"Rahmen" wo die Bilder erscheinen sollen. Links und rechts sind dann die Buttons wo mal klicken kann um vor und zurück zu kommen. Aber wie gesagt soll es auch automatisch laufen und die anderen Bilder nach 2 Sekunden anzeigen und weiterlaufen... aber danke dir für deine links eigentlich nicht schlecht nur mein Kunde will das anders haben..

synaptic

die grafische darstellung und realisation is ja letzlich vorerst egal, ich denke mal das wirste auch später selber umsetzen können
grundlegend muss erstma die technik funktionieren.

sollen da jetzt noch thumbnails mit dabei sein oder net?

wäre auch halt nice to know...

fass bitte nochmal ganz genau die features zusammen die das script haben muss!

Jan_K

hab meins grad einfach trotzdem mal eben angepasst/zerlegt, so ist es dann generell auch universeller benutzbar

Den Teil zwischen <head> und </head> einfügen:
(stellen die angepasst werden müssen voranstehenden fett markiert)

bilder[1]='bild_1.jpg';
bilder[2]='bild_2.jpg';
...
bilder[n]='bild_n.jpg';

var anzahl = n;

Code

<script language='javascript' type='text/javascript'>
<!--


var bilder = new Array();


bilder[1]='bild_1.jpg';
bilder[2]='bild_2.jpg';
...
bilder[n]='bild_n.jpg';


var anzahl = n;
var i = 1;
var aktiv = window.setInterval('vor()', 2000);


function play()
{
         window.clearInterval(aktiv);
         aktiv = window.setInterval('vor()', 2000);
}
function stop()
{
         window.clearInterval(aktiv);
}
function vor()
{
         if ( i == anzahl )
         { i=1; }
         else
         { i++; }
         document.images[0].src = bilder[i];
}
function zurueck()
{
         if ( i == 1 )
         { i=anzahl; }
         else
         { i--; }
         document.images[0].src = bilder[i];
}


//-->
</script>

Alles anzeigen

Startbild für deine Slideshow an der entsprechenden Stelle einfügen:
(img src anpassen)

Code

[img]Startbild.jpg[/img]

Und die Steuerbuttons:
(img src anpassen)

Code

[url='JavaScript:zurueck()'][img]pics/back.jpg[/img][/url]
[url='JavaScript:stop()'][img]pics/stop.jpg[/img][/url]
[url='JavaScript:play()'][img]pics/play.jpg[/img][/url]
[url='JavaScript:vor()'][img]pics/forward.jpg[/img][/url]

Das ganze hat jetzt allerdings keinen Rollover-Effekt.

Rausch

ja soll auch kein rollover haben danke schonmal wird gleich mal getestet. Also ich fasse zusammen:

1. Es muss automatisch ablaufen wobei ein bild 2 sekunden lang angezeigt werden soll und dann halt nach den 2 sekunden muss es dann weckseln mit einem anderen Bild. Der übergang ist egal (habe da keine nähren Infos von meinen Kunden)

2. Dann soll es aber auch noch über Buttons zu steuern sein. Also wenn man auf vorwärts klickt dann vorwärts und bei zurück halt zurück :). Es braucht kein pause oder play Buttons!

3. Sonst nix also keine thubnails oder so (wobei ich nicht mal weiß was das ist... mann ich bin so ein Anfänger...)

So danke schonmal an euch beide die mir helfen!

Ps. Wenn mir noch jemand bei mein rollover Problem helfen könnte wäre das super! aber das würde ich gerne in skype oder icq klären. Weil ich nicht weis ob ich die Seiten jetzt so öffentlich zeigen darf.

grüße!

Slideshow mit Javascript

Tags

Benutzer online in diesem Thema