Swap images using left/right arrows.

SquareWheel

Hello there. I'm new here, and also fairly new to the world of programming. I have never attempted PHP before, and saw it as a language to learn in the future. I believe I need it now though for a web comic I am trying to set up.

Basically, I want to have a single page to display the comic (an image, of coarse). Using two more images for left and right arrows, you can navigate through the images. I have never attempted anything like this before, so I was hoping for some help. All the images will have the same naming scheme, with just a changed number.

I figure I should have a variable that holds the value of the image your viewing, and on the press of the arrows, set it lower or higher 1. I am unsure on how this looks in PHP, and was hoping someone here could give me a hand. Please realize I have never attempted anything like this before, so you might have to be pretty descriptive.

The images will be named

Thank you so much, I appreciate this.

hennety

I'm probably wrong here, but wouldn't JavaScript solve your problem more conveniently than PHP?
There are stacks of scripts out there that will accomplish this task for you.

rikmoncur

php is the way to go for a proper site.
see this comic strip site: http://www.pvponline.com
it has an archive, calendar, blog etc.

SquareWheel

hennety, thanks for the reply. I was thinking about using Java Script for a while, but decided that many people still do not use Java script, and I want my site to work for everyone. Thanks for the suggestion though.

rikmoncur, that is exactly what I want, I just have no idea how I would implement that. I was hoping someone could supply me with codes or instructions on how to set this up myself.

SquareWheel

I'm terribly sorry to bump this topic again, but I've been delaying an update to my site because I would really like to get this worked out. Could no one give me some code snippets to use for something like this?

NogDog

How are the images organized? Is there a naming convention that will indicate the sequence in which they should be displayed, or is there a database of image information that can be queried, or do you want to set up an array of image path-names in an array right withing the PHP page, or what?

SquareWheel

The images have a naming scheme. At the moment, it's just "1.png, 2.png, etc..." but that can easily be changed. I assume a simple variable should make this easy. Functions like changing an image are foreign to me though. Do you know the functions for this?

NogDog

Here's a very basic but working script to give you some ideas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Images</title>
<!-- link rel='stylesheet' href='/include/style.css' type='text/css' -->
<style type="text/css">
<!--
#image {
   width: 800px;
   margin: 1em auto;
   padding: 10px;
   border: outset 2px silver;
   background-color: silver;
   color: black;
   overflow: auto;
   text-align: center;
}
-->
</style>
</head>
<body>
<div id="image">
<?php
error_reporting(E_ALL | E_STRICT);
// web path to image directory:
$imageDir = '/images';
// change to the image directory so glob() results in just filenames
$thisDir = getcwd();
chdir($_SERVER['DOCUMENT_ROOT'] . $imageDir);
// get all the png files into an array, then sort it:
$images = glob('*.png');
natcasesort($images);
// back to original directory:
chdir($thisDir); // back to original directory

// get requested image number, if any:
$imgNbr = (isset($_GET['img']) && array_key_exists($_GET['img'], $images)) ?
          $_GET['img'] : 0 ; // default to first image in array
// ouput requested image
echo "<img src='$imageDir/{$images[$imgNbr]}' alt=''><br>\n";
echo "<p>";
// previous link:
if($imgNbr > 0)
{
   $prev = $imgNbr - 1;
   echo "<a href='{$_SERVER['PHP_SELF']}?img=$prev'>Previous</a>\n";
}
// next link:
if($imgNbr < (count($images) - 1))
{
   $next = $imgNbr + 1;
   echo "<a href='{$_SERVER['PHP_SELF']}?img=$next'>Next</a>\n";
}
?>
</div>
</body>
</html>

SquareWheel

Hey, thanks a lot. This sure looks complicated though. I seem be getting errors returned. That is, all the code isn't being executed and some is just being shown on the page.

\n"; echo "

"; // previous link: if($imgNbr > 0) { $prev = $imgNbr - 1; echo "Previous\n"; } // next link: if($imgNbr < (count($images) - 1)) { $next = $imgNbr + 1; echo "Next\n"; } ?>

There is a box being drawn around this text, but no image appears. I create a directory for the images, and am still using the naming scheme 1.png, 2.png, etc... Do you know why this isn't working for me? Does this need to be uploaded to a server to work perhaps?

NogDog

SquareWheel wrote:
Hey, thanks a lot. This sure looks complicated though. I seem be getting errors returned. That is, all the code isn't being executed and some is just being shown on the page.
\n"; echo "

"; // previous link: if($imgNbr > 0) { $prev = $imgNbr - 1; echo "Previous\n"; } // next link: if($imgNbr < (count($images) - 1)) { $next = $imgNbr + 1; echo "Next\n"; } ?> 
There is a box being drawn around this text, but no image appears. I create a directory for the images, and am still using the naming scheme 1.png, 2.png, etc... Do you know why this isn't working for me? Does this need to be uploaded to a server to work perhaps?

Is the code really all on one line like that? If so, nothing will process from the "//" to the end of the line, since "//" starts a comment until the line end.

SquareWheel

No, it seems the forum just formatted it like that. It looks like this:

// previous link:
if($imgNbr > 0)
{
   $prev = $imgNbr - 1;
   echo "<a href='{$_SERVER['PHP_SELF']}?img=$prev'>Previous</a>\n";
}

SquareWheel

Well, this certainly works much better while uploaded to a server!

Thank you so much guys. Do I need the code that is commented out though? I don't see what the use of that is.

Anyways, thanks again. It's working great.

SquareWheel

Oh no, I have a problem. This is so far amazing guys, it saves me creating a new page for every comic I make. But at the moment, the comics are being displayed in the wrong order. Instead of 1,2,3,4,5..., it is going 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9. I only have 13 images at the moment. Can I order the array in a basic count up?

NogDog

Are you using the [man]natcasesort/man function to sort the array as I suggested in my earlier code?

SquareWheel

Heh, I'm not really sure, I basically copy and pasted the whole code. The function is used here:

natcasesort($images); // back to original directory:

I'm not sure if that sorts the array or not, because honestly this is my first time even creating a PHP file. I have done a bit of programming before, but nothing to serious.

Here is my page: http://www.squarewheelgames.com/comic.php
Ignore the comics, for now there just to test the page out and have a bit of content. If it helps, here is my full code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Images</title>
<!-- link rel='stylesheet' href='/include/style.css' type='text/css' -->
<style type="text/css">
<!--
#image
{
   width: 800px;
   margin: 1em auto;
   padding: 10px;
   border: outset 2px black;
   background-color: silver;
   color: black;
   overflow: auto;
   text-align: center;
}
-->
</style>
</head>

<body>
<div id="image">

<?php
error_reporting(E_ALL | E_STRICT);
$imageDir = '/images/comics'; // web path to image directory:
$thisDir = getcwd();
chdir($_SERVER['DOCUMENT_ROOT'] . $imageDir);
$images = glob('*.png'); // get all the png files into an array, then sort it:
natcasesort($images); // back to original directory:
chdir($thisDir); // back to original directory

// get requested image number, if any:
$imgNbr = (isset($_GET['img']) && array_key_exists($_GET['img'], $images)) ?
$_GET['img'] : 0 ; // default to first image in array

// ouput requested image
echo "<img src='$imageDir/{$images[$imgNbr]}' alt=''><br>\n";
echo "<p>";

// previous link:
if($imgNbr > 0)
{
   $prev = $imgNbr - 1;
   echo "<a href='{$_SERVER['PHP_SELF']}?img=$prev'><img src='images/carrots/Back Arrow.png' border=0></a>\n";
}

// next link:
if($imgNbr < (count($images) - 1))
{
   $next = $imgNbr + 1;
   echo "<a href='{$_SERVER['PHP_SELF']}?img=$next'><img src='images/carrots/Forward Arrow.png' border=0></a>\n";
}
?>
</div>
</body>
</html>

If you don't mind, I have a question on top of this. I've been wondering why the code that is commented out still styles the page?

<!--
#image
{
   width: 800px;
   margin: 1em auto;
   padding: 10px;
   border: outset 2px black;
   background-color: silver;
   color: black;
   overflow: auto;
   text-align: center;
}
-->

Thanks so much.

NogDog

OK, I just realized that natcasesort() does not renumber the array indexes, so add a line after that, like so:

natcasesort($images);
[color=red]$images = array_values($images);[/color]
chdir($thisDir); // back to original directory

The  comments in the style block are for any really old browsers that do not understand CSS, and will therefore ignore the text within it, whereas any reasonably modern browser will ignore the comment tags and parse the style data.

SquareWheel

Heh, perfect! Thanks so much.