SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change image source on click on same page

    Hello Guys,

    I would appreciate if someone could help me with this. I am not sure if this is PHP or perhaps Javascript or JQUERY but I hope someone of you gurus would know.

    I have created two pages (showclassified.php) and (showdetails.php). When a thumbnail link is clicked on the showclassified.php, images are populated in a table in the showdetails.php. The table shows five thumbnails photo1small, photo2small, photo3small, photo4small and photo5small all lined up in one column on the left. The next column shows a bigger image of photo1small (that is photo1big). The thumbnails and large images are all saved on a database. I would like the bigger image (photo1big) on the right to change to a bigger image of any other thumbnail when other thumbnails are clicked.

    I tried creating four other pages (page1.php, page2.php, page3.php and page4.php) to link different thumbnails and their big images but, I would prefer to be able to change the images without loading different pages. Any help? Below is code showing my two different files.

    Thank you.

    showclassified.php
    PHP Code:
    <?php
    session_start
    ();
    mysql_connect("localhost""root""") or die(mysql_error());
    mysql_select_db("blog") or die(mysql_error());

    $sql mysql_query("SELECT * FROM classified");
    while(
    $row mysql_fetch_array($sql)){
        echo 
    "<table border = '1'>";
        echo 
    "<tr>";
        
    $id $row['id'];
        echo 
    "<td rowspan='3'><a href='showdetails.php?id={$id}'><img src='{$row['photo1small']}'/></a></td>";
        echo 
    "<td width = '300'>"$row['title'] . "</td>";
        echo 
    "<td width = '100'>"$row['price'] . "</td>";
        echo 
    "</tr>";
        echo 
    "</table>";
        echo 
    "<br/>";
    }
    ?>
    showdetails.php
    PHP Code:
    <?php
    session_start
    ();
    $id $_GET['id'];

    mysql_connect("localhost""root""") or die(mysql_error());
    mysql_select_db("blog") or die(mysql_error());

    $sql mysql_query("SELECT * FROM classified WHERE id = '$id'");
    while(
    $row mysql_fetch_array($sql)){
        echo 
    "<table border = '1'>";
        echo 
    "<tr><td><a href = 'showdetails.php'><img src='{$row['photo1small']}' width = '80' height = '55' /></a></td><td rowspan = '5'><img src = '{$row['photo1big']}'/></td></tr>";
        echo 
    "<tr><td><a href = 'page1.php'><img src='{$row['photo2small']}' width = '80' height = '55' /></a></td></tr>";
        echo 
    "<tr><td><a href = 'page2.php'><img src='{$row['photo3small']}' width = '80' height = '55' /></a></td></tr>";
        echo 
    "<tr><td><a href = 'page3.php'><img src='{$row['photo4small']}' width = '80' height = '55' /></a></td></tr>";
        echo 
    "<tr><td><a href = 'page4.php'><img src='{$row['photo5small']}' width = '80' height = '55'/></a></td></tr>";
        
        echo 
    "</table>";
    }

    ?>
    Last edited by John_Betong; Jun 2, 2013 at 05:14. Reason: added php tags

  2. #2
    SitePoint Evangelist captainccs's Avatar
    Join Date
    Mar 2004
    Location
    Caracas, Venezuela
    Posts
    516
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Javascript, html and css.

    Create 5 divs with the five large images.
    CSS:
    Code:
    .show {
       display: block;
    }
    .hide {
       display: none;
    }
    HTML Code:
    <div id="image1" class="show" onClick="hide('image1')"> image </div>
    <div id="image2" class="hide" onClick="hide('image2')"> image </div>
    <div id="image3" class="hide" onClick="hide('image3')"> image </div>
    <div id="image4" class="hide" onClick="hide('image4')"> image </div>
    <div id="image5" class="hide" onClick="hide('image5')"> image </div>
    'onClick" have Javascript change the class attributes as needed.
    Denny Schlesinger
    web services


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
  •