www.webdeveloper.com
Results 1 to 10 of 10

Thread: Navigable links with PHP

  1. #1
    Join Date
    Mar 2010
    Posts
    2

    Navigable links with PHP

    I am very newbie with PHP. I have 4 pictures. Under 1 picture are 2 links ( to see previous and next picture). How to solve question? Thanks in advance!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Pictures</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    #picdiv {
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="picdiv">
    <img id="pic" src="pic/pic1.jpg" width="560" height="334" />
    <br />
    <a href="" id="prev">Previous picture</a> | <a href="" id="next">Next picture</a>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    The following should do the trick.

    Just substitute your own pic paths in the array in the javascript
    I used my own test pics

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
    var count = 0;
    var picA = new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg");
    function chngePic(dir)  {
      count = count + dir;
      if(count < 0) count = 0;
      if(count > picA.length-1) count = picA.length-1;
      
      //reassign the img's src attribute
      document.getElementById("pic").src=picA[count];
    }
    </script>
    </head>
    <body>
    <body>
    <div id="picdiv">
    <img id="pic" src="pic1.jpg"  />
    </div>
    <p>
    <a href="javascript:chngePic(-1);" id="prev">Previous picture</a> | <a href="javascript:chngePic(1);" id="next">Next picture</a>
    </p>
    </body>
    
    </body>
    </html>
    I hope I'm not doing your assignment for you
    Last edited by tirna; 03-17-2010 at 05:26 AM.

  3. #3
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780
    @tirna

    If I was your professor, I'd fail you.

    I'm kidding with you, of course, but there is a serious point or two to be said...

    This is a PHP forum, not a Javascript forum. If it was the latter, you'd get a different and higher grade, for sure! First off, all it takes is a user to disable JS and the whole darned thing breaks. The old adage, if it can be done server side, do it first. Secondly, the OP did mention "PHP" so any resolution should focus on that anyway. But I also need to throw this in - it was kind of you to code the entire thing, but when students post here, maybe that's not the best approach to teach them to be independent programmers and thinkers.

    As to the final point, that's my .02 of course. Students and kids these days with the modern Internet have it easy - just look it up, copy it, done. Sigh. But as to the other points I noted, both are important and relevant to this forum.

    Disclaimer: This is not to say a little JS or Ajax isn't used in the "real world" for making dynamic gallery scripts far cooler looking than boring PHP/HTML, but students need to learn the basics first.

    And, for the record, nice JS code after a quick glance, Tirna!

    -jim

  4. #4
    Join Date
    Mar 2010
    Posts
    2
    Thanks a lot to Tirna. This JS works very well, but maybe someone can help how to do it with pure PHP way.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    To cycle through images interactively can only be done by accessing the DOM as far as I am aware - but I am willing to be taught otherwise

    The only way I know to access the DOM programmatically is via javascript - and again I am willing to be taught otherwise

    If you like you can write php code to generate the javascript server-side and then send it back to the client browser to be executed but imo that would be redundant.

    btw - I just noticed an exta <body> tag in my html which must have snuck in during a copy and paste

  6. #6
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780
    Tirna - I know. I know.

    Please take a moment to re-read the OP"s original question, there was no requirement for "dynamic" anything or "DOM" anything.

    It's certainly cooler in the "REAL" world to make a nice dynamic and paginated image viewer via client side coding. I alluded to that earlier, but in this case as "uncool" as it is, using a standard form with GET or POST and display the proper image by adjusting the name and/or path and adding the required pagination is what this thread is about, and what a student in a PHP class needs to know. Hint hint.

    Everyone here appreciates what you did in terms of the DOM method, of course. Thank you, once again.

    -jim
    Last edited by SrWebDeveloper; 03-17-2010 at 06:17 PM. Reason: fixed a silly typo

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    I think you're missing the point of what I said.

    You can, if you want, $GET or $POST an image path or whatever to the server but to then change an image in an img tag you still have to access the DOM from the server and so to do that you would have to generate the JS on the server and then send it back to the browser. Either way you will have to use JS and JS obviously only runs in the browser.

    Hence my writing a JS to run directly in the browser and so avoid doing a 'round trip' to the server and back to change an image.

    I'd love to see how you can cycle the images without using JS in any way whatsoever. I'm not aware of how it can be done.
    Last edited by tirna; 03-17-2010 at 06:57 PM.

  8. #8
    Join Date
    Aug 2007
    Location
    Leeds, Yorkshire, England
    Posts
    387
    Quote Originally Posted by SrWebDeveloper View Post
    Please take a moment to re-read the OP"s original question, there was no requirement for "dynamic" anything or "DOM" anything.
    Wasn't the only requirement to solve the problem?

    This may be a php forum, but the more solutions the better, even if the solutions include html, css, javascript etc etc

    No reason why this can't be solved just using php (oh yeah, and html if that's okay SrWebDeveloper!!!). Just too tired to go into detail but:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Pictures</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    #picdiv {
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="picdiv">
    <?php 
    $id = (int)$_GET['id'];
    $next = $id +1;
    $prev = $id-1;
    
    echo "<img id='pic' src='pic/pic$id.jpg' width='560' height='334' />"; 
    ?>
    
    <br />
    
    <?php 
    
    echo "<a href='?id=$prev'' id='prev'">Previous picture</a> 
    |
    <a href='?id=$next' id='next'>Next picture</a>";
    
    ?>
    
    
    </div>
    </body>
    </html>

    NB - NOT tested!!! (And I'm nearly asleep!)

    And, you'd need some more logic to check when the end of your picture chain is reached, and also the beginning. Hope this rough code helps though.

  9. #9
    Join Date
    Mar 2010
    Posts
    2,803
    Point taken yes it can be done without JS.

    It's just not a way I would have contemplated doing it (maybe suffering from a slight case of tunnel vision), unless I had to cater for users with JS turned off which I believe are in a very small minority.

    Anyway your code doesn't work as is, but if you replace

    Code:
     
    echo "<a href='?id=$prev'' id='prev'">Previous picture</a> 
    |
    <a href='?id=$next' id='next'>Next picture</a>";
    with

    Code:
     
    echo "<a href='?id=$prev'' id='prev'>Previous picture</a><a href='?id=$next' id='next'>Next picture</a>";
    I got it to work on my local server (xampp) using 4 test pics.

    But you still need to check for reaching the start and end of the chain of pics which I haven't done in Yelgnidroc's code , but did do in my JS.
    Last edited by tirna; 03-17-2010 at 08:10 PM.

  10. #10
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780

    Talking

    Quote Originally Posted by tirna View Post
    I think you're missing the point of what I said.
    I'd love to see how you can cycle the images without using JS in any way whatsoever. I'm not aware of how it can be done.
    Well, now you've learned something.

    Thanks for looking at Yelgnidroc's code who beat me to it, the only changes in concept I'd make would be I'd display an array of image names (so more than one can be displayed in a series), using the offset to determine not just the pagination links, but how many images to display per page up to a defined limit set in another variable. This variable could be embedded in the form, too, so the user can view x images per page up to the max images.

    For the FINAL time, to both you and Yelgnidroc, thanks posting/discussing alternative approaches, but read the subject of this topic and the original post! We ALWAYS welcome alternative solutions but if the OP asks for a PHP solution, maybe we should do that also!!!

    Heavy, relentless, sigh. OP, see Yelgnidroc's code with fixes and you'll get the idea what to do. If you get stuck, please post your own code and we'll help you through it. If you get an A you owe Yelgnidroc a beer! (LOL)



    -jim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles