PHP/JS - Picture Slider - Variablen von PHP auf Javascript übergeben ?

DualityMind

Lieutenant
Registriert
Dez. 2015
Beiträge
768
Hallo an Alle

Ich habe da ein kleines Problem mit PHP und Javascript. Habe in Javascript noch nicht grosse Erfahrung, darum diese Frage.

Ich würde gerne einen Picture Slider selber zusammenbasteln mit Subject, Datum, Genre der App, etc...!

Jetzt habe ich diesen Code (PHP):

PHP:
<?php

    $i = 0;
    $set = "";
  
// Getpicture 2 - Fuer Bild 2

$result2 = mysql_query( "SELECT * FROM pt_apps WHERE apps_id ORDER BY apps_id desc limit 1,1" ) or error(     mysql_error() );
$id_selekt2 = mysql_fetch_array($result2);
    $result2=mysql_query( "SELECT * FROM pt_pictureapps WHERE apps_id=$id_selekt2[apps_id]" ) or error( mysql_error() );
$picnr6 = mysql_fetch_array( $result2 );
    $getpicture2 = $picnr6[picture_id];

// Getpicture1 - Fuer Bild 1 

$result = mysql_query( "SELECT * FROM pt_apps WHERE apps_id ORDER BY apps_id desc limit 0,1" ) or error(     mysql_error() );
$id_selekt = mysql_fetch_array($result);
    $result2=mysql_query( "SELECT * FROM pt_apps WHERE apps_id=$id_selekt[apps_id]" ) or error( mysql_error() );
$picnr5 = mysql_fetch_array( $result2 );
    $getpicture1 = $picnr5[picture_id];
  

  

        echo "<table cellpadding=0  cellspacing=0 border=0 style=padding-top:4px; align=center><td height=280 bgcolor=#005EBB>

    <button onclick=pictureChange5()>
  
    <img src=images/left-arrow.png width=16 height=16></img></td>

<td align=center>";

if ($set == '' )
{
echo "<a href=apps_view.php?sectio=$sectio&an=$id_selekt[apps_id]><img id=theImage src=images/$getpicture1.jpg width=394 height=274 ></img></a>";
}
if ($set == '0')
{
echo "<a href='apps_view.php?sectio=$sectio&an=$id_selekt2[apps_id]'><img id=theImage width=394 height=274 ></img>
</a>";
}

echo "</td>

<td  height=280  bgcolor=#005EBB>

    <button onclick=pictureChange2()>
  
    <img src=images/right-arrow.png width=16 height=16></img></td>

</tr></table>";

?>

und hier der Javascript Code:


Javascript:
<script>
function pictureChange2()
{

$getpicture2 = "<?php echo $getpicture2; ?>";
    i=0;
  set=0;
    document.getElementById("theImage").src="images/$getpicture2.jpg";
  
}
    </script>
        <script>
     function pictureChange5()
{

    set=5;
    i=5;
  
    document.getElementById("theImage").src="images/$getpicture5.jpg";
}
    </script>

Das Problem ist nun. Wenn z.B. statt "$getpicture2.jpg" eine Zahl eingebe wie z.B. ("117") welche er in PHP mit $picnr[picture_id] ermittelt hat, dann zeigt er das Bild an, wenn ich auf den "<button onclick=pictureChange2()>" klicke.

Wenn ich aber statt einer Zahl (117.jpg) eben das "$getpicture2.jpg" benutzen will, dann zeigt er kein Bild an. :-(

Anscheinend wird der Wert $getpicture2 nicht übernommen vom PHP Formular. Die Frage ist nun, wie kann ich die $getpicture2 von PHP auf JS in diesem Fall "function pictureChange2()" übernnehmen ? Die Variablen Set und i, werden wahrscheinlich auch nicht übernommen ?

Was mache ich falsch ? Wäre um Hilfe sehr froh, da ich am Ende meines Lateins bin und schon seit Stunden daran scheitere :-(!

ps. Der Code ist suboptimal, aber nicht aufregen deswegen. Wenn jemand einen Lösungsweg hat, bitte gerne mitteilen :-)) !

LG
 
Zuletzt bearbeitet:
Variablen in Javascript deklarierst du mit var

also:
Javascript:
var getpicture2 = "<?php echo $getpicture2; ?>";

und in strings kannst du keine Variablen benutzen!
Javascript:
document.getElementById("theImage").src="images/"+ getpicture2 +".jpg";

Deine andere Variable "set" zu nennen ist nicht unbedingt eine gute Idee, weil es leicht verwechselt werden könnte mit dem Objekt "Set"
 
Doch, das geht:
Javascript:
document.getElementById("theImage").src=`images/${getpicture2}.jpg`;
 
Ja, klar geht das... Ich dachte nur, wir müssen jetzt nicht gleich bei String Literals beginnen, wenn hier ein Einsteiger am Werk ist?

Zumal du ja nicht weißt, ob er vielleicht gerade IE11 nutzt ;)
 
Ach du liebe Güte, was für ein Durcheinander :D

Hier was zum lernen:
PHP:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Slider</title>
</head>
<body>
    <?php
        // irgendein Datenbankergebnis als Array
        $databaseResult = array('bird.jpg', 'dog.png', 'cat.gif');

        // das Datenbankergebnis als Json für JavaScript
        $databaseResultJson = json_encode($databaseResult);

        //die Anzahl des Datenbankergebnis
        // "minus 1"; da Arrays bei "0" beginnen
        $totalNumberOfImages = count($databaseResult) - 1;
    ?>
    <table cellpadding=0 cellspacing=0 border=0 style="padding-top:4px; align=center">
        <tr>
            <td height=280 bgcolor=#005EBB>
                <button onclick=previousImage()><img src="images/left-arrow.png" width=16 height=16>
            </td>
            <td align=center>
                <?php
                    // wir beginnen mit dem ersten Bild; index "0" == "bird.jpg"
                    $image = $databaseResult[0];

                    // "alt" ist der Name des Bildes; wie ein Platzhalter.
                    echo "<img id='the-image' src='images/$image' width=394 height=274 alt='$image'>";
                ?>
            </td>
            <td height=280 bgcolor=#005EBB>
                <button onclick=nextImage()><img src=images/right-arrow.png width=16 height=16>
            </td>
        </tr>
    </table>
</body>
</html>
<script>
    // zwei globale Variablen; die erste wird mit PHP gesetzt
    // "images" ist Json; kann wie ein Array verwendet werden
    let images = <?php echo $databaseResultJson; ?>;

    // auch in JS beginnen wir mit dem ersten Bild
    let index = 0;

    function nextImage() {
        // "const"; da wir die Variable "image" nicht im Nachinhein ändern wollen.
        // increaseIndex() gibt den aktuellen Index zurück
        // mit dem Index greifen wir auf das ensprechende Bild im Json zu
        const image = images[increaseIndex()];
        changeImage(image);
    }

    function previousImage() {
        const image = images[decreaseIndex()];
        changeImage(image);
    }

    function decreaseIndex() {
        // wir prüfen, ob der Index kleiner null werden würde; das wäre ein Fehler.
        // Also geben wir einfach wieder null zurück; ansonsten zählen wir den Index einen nach unten ("-1").
        return (index - 1 < 0) ? 0 : index--;
    }

    function increaseIndex() {
        // hier prüfen wir auf den maximalen Index.
        return (index + 1 > <?php echo $totalNumberOfImages; ?>) ? index : index++;
    }

    function changeImage(image) {
        document.getElementById("the-image").alt = image;
        document.getElementById("the-image").src = "images/" + image;
    }
</script>

ps. Der Code ist suboptimal, aber nicht aufregen deswegen
:D
 
@r15ch13 Das sollte eigentlich unter jede Fragestellung, in der es um PHP, automatisch direkt als erste Antwort gepostet werden ...
 
  • Gefällt mir
Reaktionen: r15ch13
Hallo an Alle

@NPC: Ich Danke Dir vielmals für den Code. Es funktioniert soweit, aber er zeigt kein Bild an. Aber ich kann von Bild1 bis Bild5 wechseln.

Problem ist nun, wenn ich dieses Array Benutze:

PHP:
$databaseResult = array( $getpicture1.jpg','$getpicture2.jpg','$getpicture3.jpg','$getpicture4.jpg','$getpicture5.jpg');

Dann kommt statt ein Bild "Das kein Bild Symbol plus $getpicture1.jpg". Wenn ich aber im Array $getpicture1.jpg zu z.B. 117.jpg ändere kommt ein Bild.

Wieso macht er aus $getpicture1 keine Zahl ? Der Pfad und alles stimmt und wenn ich eine Zahl einfüge, kommt ja ein Bild ?

Wäre sehr froh um schnelle Antwort, da ich an meiner Webseite jetzt arg im Rückstand bin, wegen dieses Problems :-( !

Danke auch allen anderen. Hoffe jemand kann helfen :-)!

LG
 
PHP:
$databaseResult = array( "$getpicture1.jpg","$getpicture2.jpg","$getpicture3.jpg","$getpicture4.jpg","$getpicture5.jpg");
Variablen werden bei einfachen Hochkomma (') nicht ersetzt, du musst dafuer die Anfuehrungszeichen nehmen (")

Wenn die Seite live sein sollte, dann empfehle ich dir DRINGEND die Umstellung auf PDO!
 
Hallo

@r15ch13: Danke hat funktioniert. Bleibt nur noch das Problem, dass er jetzt nur ein Bild anzeigt, aber ohne Link.
Kann man es im Javascript auch noch Verlinken ? z.B.

Javascript:
  function changeImage(image) {
        document.getElementById("the-image").alt = image;
        document.getElementById("the-image").src = "images/" + image;
    }

z.B. dort Einfügen:
document.getElementByURL("href").alt = url;

Oder so ähnlich. Ist nur ein Beispiel das so nicht funktioniert, aber so ähnliche sollte es sein ;)

Hat jemand Plan ?

LG
 
Poste bitte jetzt noch mal den kompletten Code den du hast.
 
Hallo

Hier ist jetzt der aktuelle Code, welches nicht ganz funktioniert.

PHP:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Slider</title>
</head>
<body>
<?php


$ip = $REMOTE_ADDR;
    $i = 0;
    

    // $setpicture = "";
    
    // PICTURE - SLIDER - BILD 2
    
$result2 = mysql_query( "SELECT * FROM pt_android WHERE freegame_id ORDER BY freegame_id desc limit 1,1" ) or error(     mysql_error() );
$id_selekt2 = mysql_fetch_array($result2);
    $result2=mysql_query( "SELECT * FROM pt_pictureandroid WHERE freegame_id=$id_selekt2[freegame_id]" ) or error( mysql_error() );
$picnr6 = mysql_fetch_array( $result2 );
    $getpicture2 = $picnr6[picture_id];

    // PICTURE - SLIDER - BILD 1

$result = mysql_query( "SELECT * FROM pt_android WHERE freegame_id ORDER BY freegame_id desc limit 0,1" ) or error(     mysql_error() );
$id_selekt = mysql_fetch_array($result);
    $result2=mysql_query( "SELECT * FROM pt_pictureandroid WHERE freegame_id=$id_selekt[freegame_id]" ) or error( mysql_error() );
$picnr5 = mysql_fetch_array( $result2 );
    $getpicture1 = $picnr5[picture_id];
    
    // PICTURE - SLIDER - BILD 3
    
$result3 = mysql_query( "SELECT * FROM pt_android WHERE freegame_id ORDER BY freegame_id desc limit 2,1" ) or error(     mysql_error() );
$id_selekt3 = mysql_fetch_array($result3);
    $result4=mysql_query( "SELECT * FROM pt_pictureandroid WHERE freegame_id=$id_selekt3[freegame_id]" ) or error( mysql_error() );
$picnr7 = mysql_fetch_array( $result4 );
    $getpicture3 = $picnr7[picture_id];
    
    
        // PICTURE - SLIDER - BILD 4
    
$result10 = mysql_query( "SELECT * FROM pt_android WHERE freegame_id ORDER BY freegame_id desc limit 3,1" ) or error(     mysql_error() );
$id_selekt6 = mysql_fetch_array($result10);
    $result11=mysql_query( "SELECT * FROM pt_pictureandroid WHERE freegame_id=$id_selekt6[freegame_id]" ) or error( mysql_error() );
$picnr10 = mysql_fetch_array( $result11 );
    $getpicture4 = $picnr10[picture_id];
    
    
    // PICTURE - SLIDER - BILD 5
    
$result6 = mysql_query( "SELECT * FROM pt_android WHERE freegame_id ORDER BY freegame_id desc limit 4,1" ) or error(     mysql_error() );
$id_selekt4 = mysql_fetch_array($result6);
    $result9=mysql_query( "SELECT * FROM pt_pictureandroid WHERE freegame_id=$id_selekt4[freegame_id]" ) or error( mysql_error() );
$picnr8 = mysql_fetch_array( $result9 );
    $getpicture5 = $picnr8[picture_id];

     // irgendein Datenbankergebnis als Array
        $databaseResult = array( "$getpicture1.jpg","$getpicture2.jpg","$getpicture3.jpg","$getpicture4.jpg","$getpicture5.jpg");
       // das Datenbankergebnis als Json für JavaScript
        $databaseResultJson = json_encode($databaseResult);

        //die Anzahl des Datenbankergebnis
        // "minus 1"; da Arrays bei "0" beginnen
        $totalNumberOfImages = count($databaseResult) - 1;
    ?>

  <table cellpadding=0 cellspacing=0 border=0 width=400 style="padding-top:4px; align=center">
        <tr>
            <td height=280 bgcolor=#005EBB>
                <button onclick=previousImage()><img src="carousel-master/images/left-arrow.png" width=16 height=16>
            </td>
            <td align=center>
                <?php
                    // wir beginnen mit dem ersten Bild; index "0" == "bird.jpg"
                    $image = $databaseResult[0];
                if ( $image == image(0))
                {
                    
                    echo "<a href=freegame_android_show.php?sectio=$sectio&an=$id_selekt[freegame_id] ><img id=the-image src=uploadscript/img/android/$image width=394 height=274 alt='$image' ></a>";
                    
                }
                if ( $image == image(1))
                {
      
                    echo "<a href=freegame_android_show.php?sectio=$sectio&an=$id_selekt2[freegame_id] ><img id=the-image src=uploadscript/img/android/$image width=394 height=274 alt='$image' ></a>";
                }
                ?>
            </td>
            <td height=280 bgcolor=#005EBB>
                <button onclick=nextImage()><img src=carousel-master/images/right-arrow.png width=16 height=16>
            </td>
        </tr>
    </table>
</body>
</html>
<script>
    // zwei globale Variablen; die erste wird mit PHP gesetzt
    // "images" ist Json; kann wie ein Array verwendet werden
    let images = <?php echo $databaseResultJson; ?>;

    // auch in JS beginnen wir mit dem ersten Bild
    let index = 0;

    function nextImage() {
        // "const"; da wir die Variable "image" nicht im Nachinhein ändern wollen.
        // increaseIndex() gibt den aktuellen Index zurück
        // mit dem Index greifen wir auf das ensprechende Bild im Json zu
        const image = images[increaseIndex()];
        changeImage(image);
    }

    function previousImage() {
        const image = images[decreaseIndex()];
        changeImage(image);
    }

    function decreaseIndex() {
        // wir prüfen, ob der Index kleiner null werden würde; das wäre ein Fehler.
        // Also geben wir einfach wieder null zurück; ansonsten zählen wir den Index einen nach unten ("-1").
        return (index - 1 < 0) ? 0 : index--;
    }

    function increaseIndex() {
        // hier prüfen wir auf den maximalen Index.
        return (index + 1 > <?php echo $totalNumberOfImages; ?>) ? index : index++;
    }

    function changeImage(image) {
        document.getElementById("the-image").alt = image;
        document.getElementById("the-image").src = "uploadscript/img/android/" + image;
    }
</script>

Bei diesem Code funktioniert es nicht richtig:

Code:
  if ( $image == image(0))
                {
                    
                    echo "<a href=freegame_android_show.php?sectio=$sectio&an=$id_selekt[freegame_id] ><img id=the-image src=uploadscript/img/android/$image width=394 height=274 alt='$image' ></a>";
                    
                }
                if ( $image == image(1))
                {
      
                    echo "<a href=freegame_android_show.php?sectio=$sectio&an=$id_selekt2[freegame_id] ><img id=the-image src=uploadscript/img/android/$image width=394 height=274 alt='$image' ></a>";
                }

Wie ich es verstanden habe, kann man den Link in PHP oder JS verlinken.

Was ist besser ? So wie oben funktioniert es nicht. Wollte nach $image1 einen break; machen, damit es nur den ersten Eintrag in der Datenbank anzeigt.

Das anderen funktioniert alles einwandfrei. Danke euch für die Arbeit und Mühe, bin sehr froh, dass
jemand hilft. :heul:
 
Okay, wow. Das kann so alles nicht funktionieren. Ich schau mal was ich tun kann.
 
Hallo r15ch13

Es funktoniert ja alles, ausser der Link kann ich nicht ändern, von Bild zu Bild :-)!

Bräuchte nur den Code vom Link des aktuellen Bildes welche ich per sectio und freegame_id ermittle.

Sieht etwas spartanisch aus, Hauptsache es funktioniert :heilig:

LG
 
also, ich kapier deinen DB-Kram nicht (Zeile 19 - 57). Du machst für jedes Bild ein einzelnes Query. Warum? An sich hat man einen (1) Datenlieferanten, der alle Daten enthält, die man so braucht.

Stell dir vor, du hast einen Image Slider mit:
- keinem Bild
- einem Bild
- 1000 Bildern

Du hast halt variable Daten und dein Code muss entsprechend "dynamisch" sein: Sprich ein Datenlieferanten liefert ein Ergebnis was dann z. B. mit einer Schleife zu einem Html-Table verwurstet wird.
 
Zuletzt bearbeitet:
Hallo

Hmm… Evtl. sollte ich eine <for schleife machen um die Neuesten 5 Apps anzeigen zu lassen ?

Entschuldige bitte, aber ich habe nicht so viel Erfahrung in php geschweige denn JavaScript :-).

Eigentlich bräuchte ich nur die 5 letzten Apps welche ich eben mit picture_id ermittle. Es ist alles in einer Datenbank unter pt_picture wo freegame_id und pt_picture_id etc... vorhanden ist.

Leider weiss ich nicht wie ich es machen soll, damit ich nicht 5 mal die Datenbank öffnen muss. Da gibt es eine viel Kürzere Variante, die ich aber im Moment noch nicht weiss.

Habe unterdessen in Javascript eingefügt, welches im Google gefunden habe:
Javascript:
 document.getElementById("url").href = "apps_show.php?sectio=<?php echo $id_selekt2[section_id] ?>&an=<?php echo $id_selekt2[freegame_id] ?>";

Es funktoniert, ABER er benutzt dann immer die gleiche URL wegen $id_selekt2. Jetzt müsste ich z.B. wenn das 3. Bild angezeigt wird auf $id_selekt3 ändern, damit er den Link ändert.

Ufff...Ich weiss ich bin kein Harry Hirsch in PHP, aber das kann ich ja später immer noch optimieren, sobald die Website läuft. Lerne dann immer ein wenig dazu, bis ich dann einen besseren Code schreiben kann. Wie z.B. PDO wie der andere Schreiber gemeint hat.

Aber im Moment brauche ich nicht den Komplexesten Code und dann wird die Website ein Reinfall :-).

Hoffe man kann das Bild irgendwie verlinken, wäre echt flott, wenn Du eine Lösung findest, dann kann ich endlich an den anderen Dinge in der Webseite noch verbessern. Bin echt im Stress deswegen :-(.

LG
 
DualityMind schrieb:
Jetzt müsste ich z.B. wenn das 3. Bild angezeigt wird auf $id_selekt3 ändern, damit er den Link ändert.

Im js-script ist "image" das aktuelle Bild (das war das Einzige, was ich nicht kommentiert habe ;)
 
Hallo

Kannst mir bitte den Rest verraten ? :evillol:

Bin gerade am Basteln und finde keine Lösung dazu das $id_selekt2 auf $id_selekt3 zu ändern ?

Habe versucht mit
if ($image[0] == "0")
{
$dazu_zaehlen = $dazu_zaehlen+1;
$id_selekt = $id_selekt$dazu_zaehlen;
}
dann

<a href=apps_show.php?sectio=$id_selekt[sectio_id] etc... etc... ! Aber will einfach nichts ändern :-(((

Bitte hilf mir :-))) !

LG
 
Zurück
Oben