[JavaScript] Nächstes Bild einer Galerie laden (PHP/MySQL)

marcel182 · 4. August 2010

Nächstes Bild einer Galerie laden (PHP/MySQL) *UPDATE*

Also eigentlich ganz einfach. Ich möchte gerne einfach per Klick auf ein Bild das nächste Bild aus der Gallerie Swappen. Eigentlich ganz einfach.

Hab auch schon 90 Prozent nur was ich nicht hinbekommen ist das Javacript immer das nächste Bild nimmt und nicht immer das gleiche. Ich zeige mal Quellcode.

das steht immer header

PHP:

    function  swap ( Bildname , BildURL )

{

  document . images [ Bildname ]. src  =  BildURL ;

}

alle bild namen hab ich aus der datenbank ausgelesen und stehen hier drin

PHP:

  $aryImages [ 0 ];

und auf klick auf das bild soll immer das neue erscheinen

PHP:

    < a href = "javascript:swap('bild02', $aryImages [ 0 ] ')" >

< img name = "bild02"  src = " $aryImages [ 0 ] "    style = "margin-top: 5px; border: 5px solid; border-color:black;"   alt = "Bitte Thumbnail von diesem Bild erzeugen!"  />

</ a > ";

ich weiß halt nur nicht wie ich wenn ich auf das bild klick $aryImages[0]; auf $aryImages[1]; und so weiter änder...

hoffe ihr könnt helfen

gruß
marcel

Anzeige

°EraZoR° · 4. August 2010

AW: PHP und MySQL Problem :-D

Ich vermute mal, dass $aryImages ein Array in PHP ist..
Man kann zwischen PHP und JavaScript keine Werte übergeben!
Zumindest nicht direkt..

Du musst dir also irgendwie mit einem Trick helfen..
Du kannst zB eine Liste (<ul>) machen und dort als List-Items mit PHP dein Array einschreiben..
Diese kannst du dann mit Javascript wieder auslesen und ein Array in JS erstellen..
Damit der User diese Liste nicht sieht, kannst du als style "display:none" angeben..

Du könntest aber auch ein simples Textfeld zu Hilfe nehmen und dort das PHP-Array mit einem Seperator wie ; oder , auslagern...

Du kannst natürlich auch eine PHP-Datei schreiben, welche das Array zurückgibt und diese mit AJAX aufrufen..

Aber ein direktes Übergeben der Werte zwischen JS und PHP geht nicht, da JS Clientseitig (im Browser) und PHP serverseitig (durch den Webserver) läuft und die beiden Systeme nie direkt in Verbindung kommen..

MfG

Nanobyte · 4. August 2010

AW: PHP und MySQL Problem :-D

Das PHP Array muss für deine Zwecke zu einem Javascript Array umgearbeitet werden.

Außerdem muss es natürlich mit PHP ausgegeben werden (In meinem fall PRINT)

Kleine Erklärung:
Erst wird das Array durchlaufen und ein neues wird erzeugt, dabei werden die Werte von Singleton Zeichen umgeben.
Im Anschluss wird das Array mit "Implode" und dem Trennzeichen "," zusammengefügt und zwischen eckigen klammern gepackt (JS Array).
Die Variable $js_array enthält jetzt dein PHP Array im Javascript-Format und wird an der Passenden Stelle mit "PRINT" ausgeben!

HTML:

<?PHP
for($a=0,$b=sizeof($aryImages[0]); $a<$b; ++$a) {
 $images[] = "'" . $arImages[0][$a] . "'";
 }
$js_array = '['.implode(',',$images).']';
?>
<a href="javascript:swap('bild02', <?PHP print $js_array ?>')"> 
<img name="bild02" src="$aryImages[0]" style="margin-top: 5px; border: 5px solid; border-color:black;" alt="Bitte Thumbnail von diesem Bild erzeugen!" /> 
</a>";

marcel182 · 4. August 2010

AW: PHP und MySQL Problem :-D

danke an euch.

habe jetzt das scipt stück von nanobyte probiert und in meinem $js_array steht leider nur ['f']. das heißt wenn ich auf den link drücker macht er das:

<a href="javascript:swap('bild02','['f']')">

gruß
marcel

hacker5 · 4. August 2010

AW: PHP und MySQL Problem :-D

Ich würd das ganze anders machen.

Ich würde via Ajax und Json dein PHP Array in ein Javascript Json Array umwandeln.

In Javascript erstellen wir ein Couter, der bei jedem nächsten Bild um eins erhöht wird.
Und in der JS Function lässt du dir halt dann das Bild ausgeben aus dem Array mit dem Couterwert.

Sprich iwie so dann:

Code:

var c=0;

//ajaxrequest

function ajax_response(response){

var json = response.responseJSON;

 $$('[name='bild02').onclick=function(){
 document.images[Bildname].src = json[c].BildURL
 c++
 }
}

Müsste man mal testen ob das Funktioniert. Ist jetzt auf das Prototype Framework aufgebaut.

Edit:// Logisch du solltest noch den json array zählen (length) und wenn c so groß ist, c nicht mehr erhöhen

onip · 4. August 2010

AW: PHP und MySQL Problem :-D

vielleicht noch ne kleine erklärung was eigentlich gemacht werden soll.
du liest also alle bilder mit php aus und legst die in einen array ab.

du sagst, dass das dein array mit allen bildern ist.

PHP:

  $aryImages [ 0 ]

nun kann aus dem array ein string gemacht werden,
um das später an js zu übergeben.

PHP:

    <? php
$js_array  =  implode ( ',' , $aryImages [ 0 ]);
  ?>

so und jetzt den string in ein js übergeben, string in ein array umwandeln, fertig.

PHP:

 
<script type="text/javascript">
var array_string = <?php  echo  $js_array ;  ?>
 var my_array = array_string.split(',');
for (i=0; i<my_array.length; i++){
    alert(my_array[i]);
}
</script>

so in der art könnte eine lösung sein.
das beispiel ist nicht getestet.

natürlich gibt es noch andere wege, wie eben ajax,
aber das könnte dir auf die schnelle weiter helfen.

marcel182 · 5. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

Bei mir sieht das jetzt so aus:

PHP:

 
$js_array = implode(',',$bildrr);

 
var array_string =<?php  echo  $js_array ;  ?>

//im quelltext steht dann: var array_string =fotos/vorschau/IMG_1328_vorschau.jpg,fotos/vorschau/IMG_1853_vorschau.jpg

PHP:

    var  my_array  =  array_string . split ( ',' );

for ( i = 0 ;  i < my_array . length ;  i ++){

     alert ( my_array [ i ]);

}

wenn ich aber jetzt versuche das array einfach mal mit document.write(my_array(0)); auszugeben geht das schon nicht und benutzen kann ichs auch nicht mehr...

gruß
marcel

onip · 5. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

du weißt schon, dass du ein IMG-tag brauchst und array immer mit [] nicht ()

document.write('<img src="'+my_array[0]+'" />');

marcel182 · 5. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

sry hab mich im forum vertippt. natürlich hab ich bei mir im [ ] aber gehen tut es trotzdem nicht. andere variablen kann ich so ausgeben nur das my_array[0] scheint leer zu sein

hacker5 · 5. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

PHP:

    <? php
 
$aryImages =array( '1' , '2' , '3' , '4' , '5' , '6' , '7' );
 
  $js_array  =  implode ( ',' , $aryImages );
 
 
  ?> 
<script>
function go(){
var as = new Array(<?  echo  $js_array ; ?>);
 
 
    for(i=0;i<as.length;i++){
    alert(as[i]);
    }
}
</script>

Das läuft. Dadraus solltest du dir jetzt was basteln können.

marcel182 · 26. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

okay gehen tut alles. prinzip ist auch verstanden.

nun hab ich eine weitere frage...

und zwar wechsel ich ja das bild indem ich dies tue document.images['bild02'].src = as;

as ist in diesem fall das array mit den bild urls. gibt es jetzt eine möglichkeit immer schon ein bild vorzuladen sodass bei langsamer leitung der bildwechsel fixer geht?

danke
marcel

Murdoc · 26. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

Code:

if(a.length > (b + 1)) {
 var img = new Image();
 img.src = a[b + 1];
}

badloader · 26. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

Nur das Prinzip was möglich wäre:

HTML:

<img src="altesBild" class="current" />
<img src="neuesBild" class="current" display="none" />

neues Bild in ein hidden img und dann "altesBild" löschen und "neuesBild" anzeigen lassen...
So wird das neue Bild auch schon vorher geladen.

hacker5 · 26. August 2010

AW: Nächstes Bild einer Galerie laden (PHP/MySQL)

Das nennt sich ein sogenannter Preloader.

Gibt es verschiedene möglichkeiten. In HTML , mit CSS oder den üblichen Proloader via Javascript

Edit:// Da waren einige vorher mit ihrer fertigen Lösung da^^

Nützliche Suchen

[JavaScript] Nächstes Bild einer Galerie laden (PHP/MySQL)

Videos zum Themenbereich