wie man mehr Button für Fotos aus Ordner laden?

Question

Ich habe den ganzen Tag verbracht, aber immer noch nicht herausfinden, wie load mehr Schaltfläche mit jquery, die Wert der Variablen in meinem PHP-Skript ändern wird, starten Sie meine for-Schleife und laden Sie mehr Fotos aus meinem Ordner Fotos. Mein JQuery-Skript ist:

$(document).ready(function() { 
    $("button").click(function(){ 
     $("php").attr({ 
      "$b" : "16" 
     }); 
    }); 
}); 

Mein PHP-Code ist:

$charnum = strlen($file); 
$b = 8; 
    $directory = "resource/galery/"; 
    if (is_dir($directory)) { 
    if ($dh = opendir($directory)) { 
     for ($i = 0; ($file = readdir($dh)) && $i < $b; ++$i) { 
      if($file !="." && $file!=".."){ 
      echo ' 
      <div class="img"> 
      <a target="_blank" href="/resource/galery/'.$file.'"> 
      <img class="img-responsive" src="/resource/galery/'.$file.'"> 
      </a> 
      <div class="desc">'.substr($file, 0, $charnum - 4).'</div> 
      </div>'; 
     } 
     } 
     closedir($dh); 
    } 
} 

Ich möchte größere Zahl von 8 $ b ändern. Oder vielleicht gibt es einen anderen Weg, dies zu tun. Vielen Dank.

Answer 1

Ich denke, Sie haben die Dinge ein wenig durcheinander gebracht, JavaScript und PHP laufen in zwei verschiedenen Welten - eine auf dem Client und eine auf der Serverseite.

So können Sie nicht "direkt" Variablen aus JavaScript ändern. Dazu müssen Sie eine Variable über eine HTTP-Anfrage wie eine GET- oder POST-Anfrage übergeben. Das PHP-Skript gibt dann eine Antwort aus, auf die Sie in Ihrem JavaScript zugreifen können.

Hier ist eine mögliche Paging-Lösung:

JS:

$(document).ready(function() { 
    $("button").click(function(){ 
    // try to get current page, or start off with 0 and increment by one. 
    var page = (parseInt($(this).data('page')) || 0) + 1; 
    // save current page as data state on the button 
    $(this).data('page', page); 

    // we call the PHP script and pass a GET variable which indicates 
    // which page we want to load. 
    $.get('yourphpscript.php?'+ $.param({page: page}), function(data) { 
     // append the result from your PHP script to #result element 
     $('#result').append(data); 
    }); 
    }); 
}); 

PHP (yourphpscript.php):

// 8 images per page 
$perPage = 8; 

// sanitize page to be a number, default to 0 - the "first page" 
$page = intval(is_numeric($_GET['page']) ? $_GET['page'] : 0); 

$charnum = strlen($file); 
$directory = "resource/galery/"; 
if (is_dir($directory)) { 
    if ($dh = opendir($directory)) { 
    // loop up to and including the requested page 
    for ($i = 0; ($file = readdir($dh)) && ($i % $perPage) <= $page; ++$i) { 
     // only output if we are on the requested page 
     if($file !="." && $file!=".." && ($i % $perPage) == $page) { 
      echo ' 
      <div class="img"> 
      <a target="_blank" href="/resource/galery/'.$file.'"> 
      <img class="img-responsive" src="/resource/galery/'.$file.'"> 
      </a> 
      <div class="desc">'.substr($file, 0, $charnum - 4).'</div> 
      </div>'; 
     } 
    } 
    closedir($dh); 
    } 
} 

HTML:

<div id="result"> 
    <!-- images go here --> 
</div> 
<button type="button">Load more</button>