Jump to content

Move Forward/Backward in Array


SaranacLake

Recommended Posts

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!

 

 

Link to comment
Share on other sites

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];

 

Link to comment
Share on other sites

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!  🙂

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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}";
}

 

  • Like 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.