Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with PHP to Javascript code translation

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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 Code:
    <?php
    $var
    ='hello';
    ?>
    Code:
    <script type="text/javascript">
    alert('<?php echo $var;?>');
    </script>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    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:

    Code:
    <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:

    Code:
        <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •