Need help with PHP to Javascript code translation

[Qua Sar]

Hello,
I have PHP code that loads a picture and based on that pictures and says below it < 1 of 10 > and the arrows let you travel the pictures.

The code for that is:
<?php
// init variables
$pic_num = 1;
$pic_max = 10;
$pic_prefix = 'P';
$pic_format = '.JPG';

if (isset($_GET['number'])) {$pic_num = $_GET['number'];}

// set img links and src
$pic = $pic_prefix.$pic_num.$pic_format;
$pic_back = $pic_num - 1;
$pic_forward = $pic_num + 1;
if ($pic_back < 1) {$pic_back = $pic_max;}
if ($pic_forward > $pic_max) {$pic_forward = 1;}

// display pic and links
?>

<img src="pictures/<?php echo $pic; ?>" WIDTH=300 HEIGHT=250><br>
<a href="<?php echo $_SERVER['PHP_SELF']."?number=".$pic_back; ?>"><</a>&nbsp;
<?php echo $pic_num." of "; echo $pic_max; ?>&nbsp;
<a href="<?php echo $_SERVER['PHP_SELF']."?number=".$pic_forward; ?>">></a>&nbsp;
<php echo $pic; ?>

Now i'm trying to take this PHP code and have the same thing hapen in javascript

I started out alright but i realized i'm not sure how to determine the picture's number which seems to be the way the PHP dtermines what picture to load, what numbers to display below and where to go if you click that pic.

Any help would be appreciated.

[abduraooft]

I started out alright but i realized i'm not sure how to determine the picture's number which seems to be the way the PHP dtermines what picture to load, what numbers to display below and where to go if you click that pic.
<?php
$var='hello';
?>
<script type="text/javascript">
alert('<?php echo $var;?>');
</script>

[Eldarrion]

There are literally hundreds of JS plug-ins that have that functionality and don't rely on GET requests to achieve the result (which your php code does), not to mention php code inside of html code, which is really tough to read and look through. (Mind you, I used to do the same thing myself and it looked rather sad) Anyways, let's see if we can get you a solution for your issue with pure JS:


<script type="text/javascript">
min_pic = 1;
curr_pic = 1; //this is obviously where you initialize the variables, see how it's pretty much the same thing as your PHP code.
max_pic = 10;
pic_prefix = "P";
pic_format = ".jpg";
function prevbtn () { // function when clicking the "previous" button
if (curr_pic == min_pic)
curr_pic = max_pic;
else
curr_pic = curr_pic - 1;
var img = document.getElementById("imgcnt");
img.src = "images/" +pic_prefix + curr_pic + pic_format;
var imgcount = document.getElementById("imgcount");
imgcount.textContent = "Image " + curr_pic + " of " + max_pic;
}
function nextbtn() { // function to fire when the "Next" button is clicked.
if (curr_pic == max_pic)
curr_pic = min_pic;
else
curr_pic = curr_pic + 1;
var img = document.getElementById("imgcnt");
img.src = "images/" + pic_prefix + curr_pic + pic_format;
var imgcount = document.getElementById("imgcount");
imgcount.textContent = "Image " + curr_pic + " of " + max_pic;
}
</script>


And certainly your HTML mark-up would be changed like this:


<input type="button" onclick="prevbtn()" value="previous" />
<img id="imgcnt" src="images/p1.jpg" />
<input type="button" onclick="nextbtn()" value="next" />
<center><div id="imgcount">Image 1 of 10</div></center>


And there it is, you will find some formatting issues... but I'm sure you can take care of those on your own. Enjoy.