Move Forward/Backward in Array

[SaranacLake]

Hello.  I have built a web page that is a gallery of pictures populated using an array.  Now I would like to create a new web page that shows an enlarged version of a given thumbnail from the gallery.

It would be nice once someone loads a photo on the details page if they could simply navigate forward/backwards one photo, instead of having to go back to the gallery to choose the next picture.

Had I designed things using a database, then I know how to do this, but alas, this is a simple solution.

Is there an easy way to leverage the array that I created - which contains a listing of all file-names from my photo directory - and somehow use HTML/PHP to navigate forward/backward one photo?

Here is the array that I build containing all photos from my directory...

	<?php
	  $path = "../WORKSPACE/images/";
  $files = array();
  
  // Check for Directory.
  if (is_dir($path)){
    // Open Directory-Handle.
    $handle = opendir($path);
	    if($handle){
      // Iterate through Directory items.
      // Return name of next item in Directory (i.e. File or Folder).
      while(($file = readdir($handle)) !== FALSE){                
        if($file != '.' && $file != '..' && preg_match("#^[^\.].*$#", $file)){
          // Not Directory, Not Hidden File
          // Add to array.
          $files[] = $file;                     // Simple array.
        }
      }
      closedir($handle);
    }
  }
	  var_dump($files);
  exit();
	?>
	

 

Thanks!

 

 

[Barand]

10 minutes ago, SaranacLake said:

Is there an easy way to leverage the array that I created - which contains a listing of all file-names from my photo directory - and somehow use HTML/PHP to navigate forward/backward one photo?

Some complex maths is required.

The array has an index, so if you are currently on the Nth element, subtract 1 to get the previous item or add 1 to get the next

$current = $files[$n];
$previous = $files[$n-1];
$next = $files[$n+1];

 

[SaranacLake]

21 minutes ago, Barand said:

Some complex maths is required.

The array has an index, so if you are currently on the Nth element, subtract 1 to get the previous item or add 1 to get the next

$current = $files[$n];
$previous = $files[$n-1];
$next = $files[$n+1];

 

Okay, this I guess I knew...

How would I apply the above to a simple - non Javascript control or whatever to make it so I have navigation tools?

Here would be the scenario...

- The user starts off in a photo gallery - which you guys helped me get working - and would see a bunch of thumbnails.

- The user would click on a given thumbnail and be taken to a new page that uses a query-string to load the chosen thumbnail.  And it would them load a larger version of said photo.

- On that "details" page - which I will code today - I would like a simple way for the user to navigate forward/backwards one photo while staying on the "details" page, thus making the user experience better.

** brainstorming here **

Could I maybe accomplish navigation using what you mention above and hyperlinks?

Or is this going to require me to reload the page since I am relying on server-side solutions?

I'm at work right now, but trying to think of how I might be able to accomplish this "nice to have" feature.

Thanks for your help!  🙂

 

[Barand]

Store the current position, n, and the array as session variables and pass the n-1 or n+1 in your hyperlinks

[SaranacLake]

6 minutes ago, Barand said:

Store the current position, n, and the array as session variables and pass the n-1 or n+1 in your hyperlinks

When I have a break at work I'll look into that.

Thanks for the tip!

[requinix]

Another option besides passing the number is to make sure the file list is always sorted (however, just always sorted), then you can search for the filename in it to get the 'n' index.

[SaranacLake]

1 hour ago, requinix said:

Another option besides passing the number is to make sure the file list is always sorted (however, just always sorted), then you can search for the filename in it to get the 'n' index.

In my case, won't my array always match the order of the files in the directory and presumably be sorted alphabetically by file-name?

[requinix]

45 minutes ago, SaranacLake said:

In my case, won't my array always match the order of the files in the directory and presumably be sorted alphabetically by file-name?

Don't presume. Check the documentation.

[Psycho]

On your gallery page, you have a process to get an array of images which you should ensure has a numerically based index (0, 1, 2, ...). First, you need to take that logic and put it in a separate file that you will include() in your gallery page. You need to do this because you will need to include the same logic on the "enlarged version" script so you always get the exact same array. Never "copy/paste" such logic between multiple pages - especially when those multiple pages are dependent upon the data being the same.

Then, on your gallery page, make each image a link to open the image in the "enlarged version" page. That link would look something like this showfull.php?id=3

Lastly, your enlarged version page could look something like this.

<?php 
//Include script to generate the image array
include('getImageArray.php');
//Get the passed image id
$imageId = isset($_GET['id']) ? int($_GET['id']) : 0;
//Check if the image exists
if(!array_key_exists($imageId, $images)
{
    //Error handling when the selected image does not exist
    $output = "Unable to retireve image";
}
else
{
    //Detemine if there will be a "prev" button (assumed array is always zero-based
    $prevId = $imageId-1;
    $prevLink = (array_key_exists($prevId, $images) ? "<a href='showfull.php?id={$prevId}'>PREV</a>" : '';
    //Detemine if there will be a "next" button
    $nextId = $imageId+1;
    $nextLink = (array_key_exists($nextId, $images) ? "<a href='showfull.php?id={$nextId}'>NEXT</a>" : '';
    //Create the output
    $output = "SOME CONTENT TO SHOW FULL-SIZE IMAGE<img src='base_path/{$images[$imageId]}' /><br>";
    $output .= "{$prevLink} | {$nextLink}";
}

 

[SaranacLake]

Thanks @Psycho that is very helpful!!  (Thanks to you too @requinix.)