SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    *solved* I want to change a text link after clicking a thumbnail image.

    Okay, I have very little knowledge regarding php coding so please go easy.

    I have a page1.php file, that has 6 thumbnail images displaying. Now, what I want is if a user clicks thumbnail 1 then a large image appears in a box along with a text link(this text link will take the user to an information page relating to the product). Now, if the user clicks thumbnail 2 then the large image 2 appears along with a text link(this text link takes the user to info2 page). etc...

    I have the large images working fine using $_GET so when the thumbs are clicked they display the correct large image. However, I now want to add the text links for each image. I have no idea where to begin.

    Help is very much appreciated.

    Thanks
    J
    Last edited by Skyline94.2; Mar 31, 2005 at 05:21.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could use a database and store information about each image

    so for example each record would have an id, description, image path, etc...

    then when you click on a thumbnail you just have this at the end of the url ?id=3
    indicating the id of the image/product/item clicked

    then you use $_GET to get that id and simply do a SELECT to retrieve all information for that item with that id and from there you place that information anywhere you want on the page.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    post some code

    Not really sure what part you don't understand, we would need to see some code to find out where you want the link, what it should contain. In general, you can draw the link html just like you draw the large image hlml, just print out the link html and append the dynamic portion

    PHP Code:
    <a href="page2.php?id=<?php echo $_GET['id'];?>">Text Link</a>

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies.

    Okay, this is what I have so far regarding php.

    PHP Code:
    <body>
    <?php if ($_GET['img']){ 
    $BigImage "<img src=\"{$_GET['img']}\" />\n"
    }
    ?>
    Then on the thumbnail images I have the following:-

    HTML Code:
    <div class="selectColour"><a href="page1.php?img=Images/large1.jpg"><img src="Images/thumb1.jpg" /></a></div>
    <div class="selectColour"><a href="page1.php?img=Images/large2.jpg"><img src="Images/thumb2.jpg" /></a></div>
    <div class="selectColour"><a href="page1.php?img=Images/large3.jpg"><img src="Images/thumb3.jpg" /></a></div>
    <div class="selectColour"><a href="page1.php?img=Images/large4.jpg"><img src="Images/thumb4.jpg" /></a></div>
    And finally this is the place where I put the large images:-

    HTML Code:
    <div id="detailBoxLeft"><? echo $BigImage ?></div>
    Now this is where I want the text link to change:-

    HTML Code:
    <div id="detailBoxRight">I would like a text link, 'info' here that will direct the user to a corresponding page, eg. info1 for thumb1/large1 info2 thumb2/large2 etc..</div>
    As I have said I have very very low levels of php knowledge so I am looking for all the advice/help I can get.

    Thanks
    J

  5. #5
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Erial, NJ
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here I wrote it for you....

    I know, I know; you are trying to learn. We'll peak through this coding for a little bit and Im sure you'll figure out exactly what is going on. Its just a few conditionals and pre-set links (page.php?id=1).

    This is what the links surrounding your pictures should look like
    PHP Code:
    //This isnt PHP, this is HTML with PHP stuck in the middle.
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=1">Picture 1</a>
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=2">Picture 2</a>
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=3">Picture 3</a>
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=4">Picture 4</a>
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=5">Picture 5</a>
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=6">Picture 6</a>
    Put this at the top of your page...
    PHP Code:
    if(isset($_GET['id'])){
    if(
    $_GET['id']==1){
    $image 'filename_1.jpg';
    $link '<a href="www.whatever.com">Link1</a>';
    }elseif(
    $_GET['id']==2){
    $image 'filename_1.jpg';
    $link '<a href="www.thisplace.com">Link2</a>'
    }elseif(
    $_GET['id']==3){
    $image 'filename_1.jpg';
    $link '<a href="www.anotherplace.com">Link3</a>'
    }elseif(
    $_GET['id']==4){
    $image 'filename_1.jpg';
    $link '<a href="www.awsomeplace.com">Link4</a>'
    }elseif(
    $_GET['id']==5){
    $image 'filename_1.jpg';
    $link '<a href="www.notsocoolplace.com">Link5</a>'
    }else{
    $image 'filename_1.jpg';
    $link '<a href="www.itsokayplace.com">Link6</a>'
    }

    Put this where the big image pops up...
    PHP Code:
    if(isset($_GET['id']) && $_GET['id']!=""){
    echo 
    '<img src="'.$image.'">';

    Put this where the link is suppose to be.
    PHP Code:
    if(isset($_GET['id']) && $_GET['id']!=""){
    echo 
    $link;


  7. #7
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is absolutely fantastic. It works an absolute treat. Marvellous.

    Thank you so much for the help. I appreciate it bundles. Regarding the id numbers, can I re-use them on page 2 or should I continue to increment them, so page1.php has ids 1-6, page2.php has ids 7-12 etc...or can I simply have ids 1-6 on every new page?

    Thanks
    J


Bookmarks

Posting Permissions

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