PHP photo gallery next and previous buttons

Posted on 2008-10-06
Last Modified: 2013-12-12
Currently my script consits of a page showing albums, within these albums are photos, so when the user views a photo i want it so that they can press next to go the next photo in the album or previous to go to the photo before the current one with in this album.

I dont want the user jumping from one album to another album, simply from photo to photo but it is important to make sure the user stays with in that album.

For example, photos 1,2,3,14,21,26 are in album 1. photos 4,5,6,15,22,26 are in album 2
If the user is viewing album 1 and photo 3, if they then press the next button it should take them to photo 14 if they pressed previous it should take them to photo 2.

I hope this is clear enough it would be great if someone could help me write this code or point me in the right direction.

Thank you
Question by:thomasmutton
  • 6
  • 5

Expert Comment

ID: 22655102
LVL 20

Expert Comment

ID: 22657773
You need to have this list inside the code.  You could hard code it but it would be better to pull it from a database.
Think of it as an index.
So you have a table with fields like this -

id    (this is a number for which record you are on - this can be auto incremented)
album     (Album number)
pic_id     (picture number)
prev_id  (last picture or 0 for start of chain)
next_id   (next pic or 0 for end of chain)

So for example the record for pic 14 would be :
id = 201   (or whatever auto incremental number it has got to)
Album = 1
pic_id = 14
prev_id = 3
next_id = 21

You read in this record
$result =mysql_query("select * where pic_id = " . $current);
$row = mysql_fetch_array($result);

assign them out to variables to make them easier to put in echo strings
$record_prev_id = $row['prev_id'];
$record_next_id = $row['next_id'];

and then you make up the links using this data
echo "<a href=\"webpage.php?pic_id=" . $record_prev_id . "\">Prev Picture</a>";
echo "<a href=\"webpage.php?pic_id=" . $record_next_id . "\">Prev Picture</a>";

You will need to check for '0' as the value and then either not print the link or whatever you want to happen when it is at the start.

If you add a picture you need to insert a new row and gets its id value.
Now search for the record with next_id = 0 and set that to the new id value
and go back to the new one and set its prev_id value to the one you just found.

If you delete a pic you need to fine the ones before and after it (from that record) and set their values to each others ID (so you skip that one) and then remove it.  If either of the values are already '0' then you need to go to the other one and set that to '0' as it is now the start or the end.

find the record with '0' as the next_id

Author Comment

ID: 22658046
I like the sound of this method im just trying to think how i would put next_id and pre_id into the database, this website will be used by a customer of mine, they will be uploading the pictures.
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

LVL 20

Expert Comment

ID: 22658523
to start with the database is empty
they upload pic one into album 1

You search for a pic with next id = 0 and you dont find any records.
So you ass a new record - and it goes in as

id = 1 (auto)
Album = 1
pic_id = 1
prev_id = 0
next_id = 0

They upload pic 2

You search for a record with next_id=0 and you find id 1. We'll store this in 'old_last'

id = 2 (auto)
Album = 1
pic_id = 2
prev_id = 1 (old_last)
next_id = 0

you store this id (taken from the sql command - it returns the id it created) into new_last

then you update the record (old_last) and change next_id to new_last

Does that make sense to you ?


Author Comment

ID: 22687740
Is there an example code for this? or a different method as i have already have a gallery working and do not want to change it much.
LVL 20

Expert Comment

ID: 22688152
did you write the gallery or is it a downloaded one ?

Either way - if you want this functionality you will need it coded as described above.  
If it is a downloaded one then it should be able to do this for you.

Author Comment

ID: 22694023
Could you posibly write some of the code for me? the script i have already is coded by me. Im just finding it hard to work out the adding/deleting photo when it changes the next and previous id's
LVL 20

Expert Comment

ID: 22694396
Well to work with your code I would have to know what it does already and all the variable names and paths etc.
I have explained how it works and can give you some php code but it will not just bolt in - you will have to do some work (or get back the original author)

Author Comment

ID: 22729052
This is the code so far for adding a photo and it does not seem to work properly, i can not think how to do it properly.

                                                            //Get photo ID
                                                            $get_photo_id = mysql_query("SELECT * FROM photos ORDER BY PhotoID DESC LIMIT 1");
                                                            $photo_rows = mysql_num_rows($get_photo_id);
                                                            $show_photo_id = mysql_fetch_array($get_photo_id);

                                                            //Create next and previous ID's
                                                            $count_photos = mysql_query("SELECT * FROM photos WHERE AlbumID='$albumid'");
                                                            $num_photos = mysql_num_rows($count_photos);

                                                            $get_previous = mysql_query("SELECT * FROM photos WHERE AlbumID='$albumid' AND NextID='0'");
                                                            $show_previous = mysql_fetch_array($get_previous);

                                                            if($num_photos < 2 )
                                                                        $next = 0;
                                                                        $previous = 0;
                                                                        $next = 0;
                                                                        $previous = $show_previous['PhotoID'];

                                                            mysql_query("UPDATE photos SET NextID='$next' WHERE PhotoID='$show_photo_id[PhotoID]'") or die(mysql_error());
                                                            mysql_query("UPDATE photos SET PreviousID='$previous' WHERE PhotoID='$show_photo_id[PhotoID]'") or die(mysql_error());
                                                            mysql_query("UPDATE photos SET NextID='$show_photo_id[PhotoID]' WHERE PhotoID='$previous'") or die(mysql_error());
LVL 20

Expert Comment

ID: 22729291
Not a million miles off.......

(there may be some bugs in this as I'm writing it off the top of my head and do not have anywhere to test it at the moment but it should give you the idea.
Here I insert the record (you'll have to fill in the details here) and then update the previous record to point to it.

// First check the current last photo in that album
$get_previous = mysql_query("SELECT * FROM photos WHERE AlbumID='$albumid' AND NextID='0'");
if (mysql_num_rows($get_previous) == 1) {
	$previous = mysql_fetch_array($get_previous);
	$previous_id = $previous['photoID'];
} else {
	$previous_id = 0;
// Now Insert record - note we add in 0 for next and previous_id out of the statement above
mysql_query("INSERT INTO photos (albumid, NextID, PreviousID......etc) VALUES ($album_num, '0', $previous_id ,.....whatever);
// get the record number we just inserted 
$current_photo = mysql_insert_id();
if ($previous_id != 0) {
	mysql_query("UPDATE photos SET NextID=$current_photo WHERE PhotoID='$previous_id'") or die(mysql_error());

Open in new window


Author Comment

ID: 23151053
Sorry i have taken so long to reply but i have just noticed an error in the system. When i delete photos it add the photos in a strange order for example, first order:-
ID1    Photo 1
ID2    Photo 2
ID3    Photo 3
ID4    Photo 4

If i delete ID2 Photo 2 the order is like this:-
ID1    Photo 1
ID3    Photo 3
ID4    Photo 4

Which is correct but if i add another photo, here is the new order:-
ID1    Photo 1
ID5    Photo 5
ID3    Photo 3
ID4    Photo 4

Basically it adds the new photo in the place of where the old photo was deleted which creates a strange order when viewing the photos.

Here is my current delete sctipt.

            $photoid = $_GET['photoid'];

            //get photo
            $get_photo = mysql_query("SELECT * FROM photos WHERE PhotoID='$photoid'");
            $delete_photo = mysql_fetch_array($get_photo);

            //edit next and previous
            $next = $delete_photo['NextID'];
            $previous = $delete_photo['PreviousID'];
            if($next != 0)
                        mysql_query("UPDATE photos SET PreviousID='$previous' WHERE PhotoID='$next'") or die(mysql_error());
                        mysql_query("UPDATE photos SET NextID='0' WHERE PhotoID='$previous'") or die(mysql_error());
            if($previous != 0)
                        mysql_query("UPDATE photos SET NextID='$next' WHERE PhotoID='$previous'") or die(mysql_error());
                        mysql_query("UPDATE photos SET PreviousID='0' WHERE PhotoID='$Next'") or die(mysql_error());

                        unlink("../../photos/".$delete_photo['PhotoID'].$delete_photo['PhotoExt']); //delete photo big
                        unlink("../../photos/display/".$delete_photo['PhotoID'].$delete_photo['PhotoExt']); //delete photo display
                        unlink("../../photos/thumb/".$delete_photo['PhotoID'].$delete_photo['PhotoExt']); //delete photo thumb
                        $delete_photo = mysql_query("DELETE FROM photos WHERE PhotoID='$delete_photo[PhotoID]'");//delete database record

            echo "You have deleted this photo.";
LVL 20

Accepted Solution

edster9999 earned 500 total points
ID: 23172470
That looks like the right logic to me.  Check that the SQL command is getting entered correctly and getting the right values by changing all the SQL lines to something like :

$SQL = "UPDATE photos SET PreviousID='$previous' WHERE PhotoID='$next'";
echo "$SQL";
mysql_query($SQL) or die(mysql_error());

I normally leave these lines in place and comment out the echo line when I am finished testing.


Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question