Reload page to show new selection

Hi, I have this code to display selected images - in this case “Oil on canvas”

<?php
$json = file_get_contents('js/rivka-img.json');
$data = json_decode($json, true);
$galleryRivka = $data['galleryRivka'];
$imagesDirectory = "images/recent/";
$count = 0;
$prvNum = 0;
$nxtNum = 0;
foreach ($galleryRivka as $entry) {
          $image = $entry['imgMain'];
          $title = $entry['titleEng'];
          $size = $entry['width']." x ".$entry['height']."cm";
          $captPos = $entry['captionPos'];
          $year = $entry['year']." &nbsp; &nbsp;";
          $medium = $entry['medium'];

  if ($entry['medium'] == "Oil on canvas") {
             $count++;
             
             $nxtNum = $count + 1;
             echo "<a id='pic{$count}'><span style='visibility: hidden;'>hi</span></a> ";
    echo "<div class='grid-container'> ";
             // start prv-nxt
        echo "<div class='grid-item prv-nxt'>";
             if ( $count > 1) {
                 $prvNum = $count - 1;
                  echo "<a href='#pic{$prvNum}'><i class='fa-style fa-solid fa-caret-up' style='font-size: 2.5rem;'></i></a><br/>";
                }  
             echo "<a href='#pic{$nxtNum}'><i class='fa-style fa-solid fa-caret-down' style='font-size: 2.5rem;'></i></a>";
        echo"</div>";
             // end prv-nxt
             // start imgMain 
        echo "<div class='imgMain'>";
            echo "<img class='example lazyload' src='{$imagesDirectory}{$image}' data-src='{$imagesDirectory}{$image}' data-sizes='auto' data-magnify-src='{$imagesDirectory}{$image}'>";
             // end imgMain 
        echo "</div>";
            // start lableTxt
        echo "<div class='flex-container'>";
            echo "<div class='flex-items' style='{$captPos}'>{$title}</div>";
            echo "<div class='flex-items' style='{$captPos}'>{$medium}</div>";
            echo "<div class='flex-items' style='{$captPos}'>{$year} {$size}</div>";
        echo "</div>";
    
        echo "</div>";
      }
}   
?>

How would I reload this page if a different group was selected to view - by onClick event or selecting a menu item?
Any help much appreciated

I’d do exactly that - trap an onClick event in Javascript, have it call a separate PHP script to return the selected group contents, and insert that back into your html. Create a <div> that surrounds all the image content, and have your PHP code output all the content of that, then it will be easy to retrieve the output and insert it back into the page in your success() code.

It’s more of a JS / Ajax thing than PHP, and I’m sure there’s a lot of example code in the JS section of the forum - I’ve picked up enough to do a basic version of what you want from code in questions that other people asked.

1 Like

Continued at How to reload page, rerun php code.