PHP - Select Button W/ Image And Have That Image Display On Another Page

Hello,
Five images will be displayed inside a division.
There will be a previous and next button/link.
If someone click the next button the next image will be added in that div and the first image will be gone from that div.
The previous button/link will do the same thing.

Is it possible with php?
I am confused if it's a javascript or ajax question.

Thanks.

Hi all

I need some help, i have a list of orders on the left column and want to click on each order and display related db information in the right column in a div or other method for each record click.

screenshot attached.

Well the subject line is pretty explicit.  I found this script that uploads a picture onto a folder on the server called images, then inserts the the path of the image on the images folder onto a VACHAR field in a database table. 
Code: [Select]




<?php

//This file inserts the main image into the images table.

//address error handling

ini_set ('display_errors', 1);
error_reporting (E_ALL & ~E_NOTICE);





//authenticate user
//Start session
session_start();

       
        //Connect to database
require ('config.php');

//Check whether the session variable id is present or not. If not, deny access.
if(!isset($_SESSION['id']) || (trim($_SESSION['id']) == '')) {
header("location: access_denied.php");
exit();
}

        else{ 







// Check to see if the type of file uploaded is a valid image type

function is_valid_type($file)

{

     // This is an array that holds all the valid image MIME types

     $valid_types = array("image/jpg", "image/jpeg", "image/bmp", "image/gif");

 

     if (in_array($file['type'], $valid_types))

         return 1;

     return 0;

}

 

// Just a short function that prints out the contents of an array in a manner that's easy to read

// I used this function during debugging but it serves no purpose at run time for this example

function showContents($array)

{

     echo "<pre>";

     print_r($array);

     echo "</pre>";

}

 

// Set some constants

 

// This variable is the path to the image folder where all the images are going to be stored

// Note that there is a trailing forward slash

$TARGET_PATH = "images/";

 

// Get our POSTed variable

$image = $_FILES['image'];

 

// Sanitize our input

$image['name'] = mysql_real_escape_string($image['name']);

 

// Build our target path full string.  This is where the file will be moved to

// i.e.  images/picture.jpg

$TARGET_PATH .= $image['name'];

 

// Make sure all the fields from the form have inputs

if ( $image['name'] == "" )

{

     $_SESSION['error'] = "All fields are required";

     header("Location: member.php");

     exit;

}

 

// Check to make sure that our file is actually an image

// You check the file type instead of the extension because the extension can easily be faked

if (!is_valid_type($image))

{

     $_SESSION['error'] = "You must upload a jpeg, gif, or bmp";

     header("Location: member.php");

     exit;

}

 

// Here we check to see if a file with that name already exists

// You could get past filename problems by appending a timestamp to the filename and then continuing

if (file_exists($TARGET_PATH))

{

     $_SESSION['error'] = "A file with that name already exists";

     header("Location: member.php");

     exit;

}

 

// Lets attempt to move the file from its temporary directory to its new home

if (move_uploaded_file($image['tmp_name'], $TARGET_PATH))

{

     // NOTE: This is where a lot of people make mistakes.

     // We are *not* putting the image into the database; we are putting a reference to the file's location on the server

     $sql = "insert into images (member_id, image_cartegory, image_date, image) values ('{$_SESSION['id']}', 'main', NOW(), '" . $image['name'] . "')";

     $result = mysql_query($sql) or die ("Could not insert data into DB: " . mysql_error());

     header("Location: images.php");

echo "File uploaded";

     exit;

}

else

{

     // A common cause of file moving failures is because of bad permissions on the directory attempting to be written to

     // Make sure you chmod the directory to be writeable

     $_SESSION['error'] = "Could not upload file.  Check read/write persmissions on the directory";

     header("Location: member.php");

     exit;

}







        } //End of if session variable id is not present.
 


?> 


The script seems to work fine because I managed to upload a picture which was successfully inserted into my images folder and into the database.
Now the problem is, I can't figure out exactly how to write the script that displays the image on an html page. I used the following script which didn't work.


Code: [Select]

//authenticate user
//Start session
session_start();

       
        //Connect to database
require ('config.php');

$sql = mysql_query("SELECT* FROM images WHERE member_id = '".$_SESSION['id']."' AND image_cartegory = 'main' ");
$row = mysql_fetch_assoc($sql);
$imagebytes = $row['image'];
header("Content-type: image/jpeg");
print $imagebytes;







Seems to me like I need to alter some variables to match the variables used in the insert script, just can't figure out which.  Can anyone help??

In my php site i have a select button.On selecting an item from the select box ,the corresponding picture should be displayed in the <img>,from the mysql database.
This is not happening with the following code


<form name='abc' method='post'>
<select name="std_name" onChange="this.form.submit();">
<option value="...Select...">...Select...</option>
<option value="Adam">Adam </option>
<option value="Amanda">Amanda</option>
<option value="Angel">Angel </option>
<option value="Brewier">Brewier</option>
<option value="Butle">Butler </option>
<option value="Carrie">Carrie </option>
</select><br />
<?php
if(isset($_POST['submit']))
{

$aname1=$_POST['std_name'];

$sql1="select * from std where name='$aname1'";
$result=mysql_query($sql1);
while($n=mysql_fetch_row($result))
{
echo $n[2];
echo "<img src='$n[2]' width='118' height='133' name='std/>";}
}
?>
<img src="Adam.jpg" width="118" height="133" name="std"/><br />



</form>

Below is a page which is supposed to output the name, blog contribution and picture of contributing members of a website.
<div id="blog_content" class="" style="height:90%; width:97%; border:5px solid #c0c0c0; background-color: #FFFFFF;"> <!--opens blog content--> 



                             
<?php


//address error handling

ini_set ('display_errors', 1);
error_reporting (E_ALL & ~E_NOTICE);



//include the config file

require_once("config.php");



//Define the query. Select all rows from firstname column in members table, title column in blogs table,and entry column in blogs table, sorting in ascneding order by the title entry, knowing that the id column in mebers table is the same as the id column in blogs table.


$sql = "SELECT


    blogs.title,blogs.entry,members.firstname,images.image
FROM
    blogs
LEFT JOIN
    members
ON
    blogs.member_id = members.member_id
LEFT JOIN
    images
ON
    blogs.member_id = images.member_id

ORDER BY
     blogs.title ASC

"; 

$query = mysql_query($sql);

                 if($query !== false && mysql_num_rows($query) > 0)

                 {

         while(($row = mysql_fetch_assoc($query)) !== false)

         {

 echo

                
                              '<div id="blog_content1" style="float:left; position:relative;bottom:18px;left:13px; background-color: #FFFFFF; height:16.7%; width:100%; border:0px none none;"                              
                              <!--opens blog_content1  same as main center top 1 and 2 from index page everything scaled down by a factor of 3, heightwise--> 
        
 
                                   <div class="red_bar" style="height:3%; width:100%; border:1px solid #959595;"> <!--a--> 
 
                                       <div class="shade1" style="height:5px; width:100%; border:0px none none;"> </div>                                      
                                       <div class="shade2" style="height:5px; width:100%; border:0px none none"> </div> 
                                       <div class="shade3" style="height:5px%; width:100%; border:0px none none"> </div>

 
                                   </div> <!-- closes red bar--> 
 
 
 
                                   <div class="content" style="height:28.3%; width:100%; border:0px none none;"> <!----> 
 
                                       
                                           <div class="slideshow" id="keylin" style="float:left; width:20%;  border:0px none none;"> <!--a-->
 
                                                  
                                                  
 
                                                 <div><img header("Content-type: image/jpeg"); name="" alt="" id="" height="105" width="105" src="$row[image]" /></div>                              
 
 
                                       
                                           </div> <!-- closes pic--> 
 
 
 
                                           <div class="content_text"  style="float:right;  position:relative;top:7px;left:0px; max-height:150px; width:78.5%; border-width:4.5px; border-bottom-style:solid; border-right-style:solid; border-color:#c0c0c0; "> <!--a-->'; 
 
                                           

                                               
                                                echo "<h3>".$row['title']."</h3>";

echo "<p>" .$row['entry']."<br />".$row['firstname']."</p>";

         
                                             
                                                                                           
                                           echo                                         
                                           '</div> <!-- closes content text--> 
 
  
                                   </div> <!-- closes content--> 
 
                                   
                                                                                                                                                                                                                            
                            </div> <!-- closes blog_content1-->';



                                                 }

                 }

                 else if($query == false)

                 {

               

 echo "<p>Query was not successful because:<strong>".mysql_error()."</strong></p>";

         echo "<p>The query being run was \"".$sql."\"</p>";

                 }

                 else if($query !== false && mysql_num_rows($query) == 0)

                 {

         echo "<p>The query returned 0 results.</p>";

                 }


                                                 mysql_close(); //Close the database connection.





                                                 ?> 

                      
                        </div> <!-- closes blog content-->


The select query is designed to retrieve all the blog contributions(represented by the fields blogs.title and blogs.entry) from the database, alongside the contributing member (member.firstname) and the member's picture(images.image), using the member_id column to join the 3 tables involved, and outputs them on the webpage.   The title, entry and firstname values are successfully displayed on the resulting page.  However, I can't seem to figure out how to get the picture to be displayed.  Note that the picture was successfully stored in the database and I was able to view it on a separate page using a simple select query.  It is now just a question of how to get it to display on this particularly crowded page.  Anyone knows how I can output the picture in the img tag?  I tried placing the header("Content-type: image/jpeg"); statement at the top of the php segment, then just right below the select query and finally just right above the img tag, but in every case, I just got a big white blank page starring at me.  How and where should I place the header statement? And what else am I to do to get this picture displayed?  Any help is appreciated.

Hi im wanting to create this system where it loads all your files in a specified directory, loads all the images, although i have done that what im trying to do is have it so it prints them into a 9x9 grid automatically, in which i need to find something to restrain the echo of the variable to a limit of 9..  i need to create the <tr><th>and <td>'s automatically and also id like it so if there is more than 9, it will allow me to select a button which will load up the next section of images. heres the code i have so far:

<?php
$dir = "images/";
$dh  = opendir($dir);
while (false !== ($filename = readdir($dh))) {
    $files[] = $filename;
}

sort($files);
print_r($files); 


I then used this to try and echo into a table :S
<?php
if ($handle = opendir('images/')) {


      while (false !== ($file = readdir($handle))) {
  echo "<table width='450px' height'450px' border='4px solid #000'>";
if ($file != "." && $file != ".."){
echo "<tr><td>$file<br></td>";
echo "<td><img src=images/".$file." height='20px' width='20px'></td></tr><br>";
    }
}
echo "</table>";
closedir($handle);
}

?>

They are seperate as i havent merged together as i wud like to get them working first.

I was trying to do the max and min on the array numbers but was stuck doing that.

Any help would be greatly apprecated
Many thanks
Lewis Stevens

Hey there I am having a problem where I am pulling the records for images from my database and then trying to display them. What happens is there are three images in the database and I want to display them. My code displays the images but it only shows two of the three.  I know there are three images in the database I put them in and checked just to make sure. It just seems to only want to display two images instead of three.

Here's the code:$getImages = "SELECT * FROM Images WHERE SKU = '".$sku."'";
$resultGetImages = mysql_query($getImages);
$records = mysql_fetch_assoc($resultGetImages);
?>
     while($records = mysql_fetch_assoc($resultGetImages)){
                
        echo "<a onclick=\"document.getElementById('placeholder').src='../../".$records['Path']."'\" target=\"_blank\"><img src=\"../../".$records['ThumbPath']."\" alt=\"".$records['Description']."\" height=\"".$records['ThumbWidth']."\" /></a>\n";
      }
?>

I have tried a for loop as well but it displayed more images than were in the database and just a single image over and over again. I know that was a flaw in my code and I'm not even sure a for loop would even be a reasonable way to go.

I have a script that uploads my images to a folder and database which works fine. I am looking to display my images on the fly to resize them. How do I intergrate my image output string with the fly string.

Current output
Code: [Select]
echo '<img src="' . $dir . '/' . $image_id . '.jpg">';

Fly string
Code: [Select]
<img src="/scripts/thumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />

Thanks for your help

Don't know if it is php or html but the image won't display.

Code: [Select]
<!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" xml:lang="en" lang="en" >
<head>
<meta name="google-site-verification" content="y_kspZkCZOQM-WGNB_lQ8BhJS8p7-B66hkHI_UhzKbs" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<link type="text/css" rel="stylesheet" href="css/reset.css"  />
<link type="text/css" rel="stylesheet" href="css/960.css"  />
<link type="text/css" rel="stylesheet" href="css/custom.css"  />
        <title>Bay Area Remote Control Society</title>
</head>
    <body>
        <div id="wrapper" class="container_12">
            <div id="header" class="grid_12">
                <div id="left-header" class="grid_5 alpha"><?php include('content/left-header.php'); ?></div>
                <div id="newsflash" class="grid_7 omega"><?php include('content/newsflash.php'); ?></div>
            </div>
            <div id="leftmenu" class="grid_3"><?php include('content/menu2.php'); ?></div>
            <div id="maincontent" class="grid_9"><?php include('content/maincontent.php'); ?></div>
            <div id ="footer" class="grid_12"><?php include('content/footer.php'); ?></div>
        </div><!-- end wrapper -->
    </body>
</html>
left-header.php
Code: [Select]
<?php

?>   
<img src="Pictures_Other/concorde.jpg" alt="concorde" border="0" width="250" height="188" />

Hey there, my problem is that I am trying to pull three images from a database and then displaying them with a large image above them. I want to then be able to click the smaller ones and then they become the larger one(kind of like on amazon). I am having 2 major problems with it at this point. the first is my while statement is only pulling 2 of the three images from the database, and secondly my image replacement javascript replaces with the smaller image. With the javascript it dosen't have to be done that way or in javascript so a link or suggestions on how to do that better would be great.

So here's my code:
<?php
include('../../php/includes/openDbConn.php');
$sku = 'c-111111';
$getImages = "SELECT * FROM Images WHERE SKU = '".$sku."'";
$resultGetImages = mysql_query($getImages);
$records = mysql_fetch_assoc($resultGetImages);
?>
   <img src="../../<?php echo $records['Path'] ?>" id="placeholder" alt="<?php echo $record['Description']; ?>" height="<?php echo $record['Width']; ?>" />
    <div id="thumbImages">
      <?php
while($records = mysql_fetch_assoc($resultGetImages)){
    echo "<a onclick=\"document.getElementById('placeholder').src='../../".$records['ThumbPath']."'\" target=\"_blank\"><img src=\"../../".$records['ThumbPath']."\" alt=\"".$records['Description']."\" height=\"".$records['ThumbWidth']."\" /></a>\n";
}
?>

and a bit on the table with the images. It stores the sku and the Path of a thumbnail, regular and large sized image. All help is much appreciated.

Hi,

I am trying to using an image as the submit but I cant get it to work, I have tried around ten different options but when I click the image not happens. (It works with plain submit button).  Can anyone advise please.  I cant quite believe I cant get it to work.  Do I need to change the form action?

Code: [Select]
<form action="" method="post">

----form----

<input type="image" value="submit" name="image" src="http://www.domain.co.uk/images/homepageregister.PNG"  >

This topic has been moved to HTML Help.

http://www.phpfreaks.com/forums/index.php?topic=332434.0

I am trying to display an image stream from my pond cam... The stream generated by my ip video server is a jpeg stream without boundaries. Causeur of this the normal mime replace isn't working. I need php to read a picture from the stream, and display the picture in the browser while reading the next picture in the background.

I've got to the point that I am able to connect to the stream, read the first image, and display it in the browser as can be seen in the link below
(cam is only on from 09:00 until 16:00)

http://cam.xsiteit.nl/readstream_test.php

From this point I need to read the second image and replace the image in the browser with the new one.  This process has to continu until the browser is closed.

Any help would be great!

Regards, Peter