Click here to Skip to main content
15,900,110 members
Search within:


How to show multiple images of database in a form (Horizontally).
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi friends,

I have images stored in database and in a folder and i want to show these images in Horizontal format one by one from a search query.
I am able to show vertical format,But i am not able to figure out how to do this if any of you have any idea then pls help me out.

i only need images(information is not compulsory).

This my code

XML
<center>
<table width="910" border="0" cellspacing="0"  cellpadding="3" style="color:#303030; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:18px; text-align:left;">
<tr bgcolor="#e5e5e5">
<td colspan="5" class="mainname"><span class="active"><strong>Search Result</strong></span></td>
</tr>
<tr>
<td>
<?php
if(isset($_POST['Search']))
{
/*echo "<script> alert('hello')</script>";*/
$gender=$_POST['gender'];
$agemin=$_POST['agemin'];
$agemax=$_POST['agemax'];
$hmin=$_POST['hmin'];
$hmax=$_POST['hmax'];
$religion=$_POST['religion'];
$marital_status=$_POST['marital_status'];
$city=$_POST['city'];
$state=$_POST['state'];
$country=$_POST['country'];
 include("db.php");

$query_for_result=mysql_query("select * from matri_user_info where (gender='$gender') and (age between $agemin and $agemax) and (height between $hmin and $hmax) and (religion='$religion') and (marital_status='$marital_status') and (city ='$city') and (state='$state') and (country='$country');");

//$query_for_result=mysql_query("select * from matri_user_info where (gender='$gender');");

$num=mysql_num_rows($query_for_result);
echo <<<end
<table align="right" >
<tr>
<td bgcolor="#6fa34f" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:5px 5px 5px 5px; color:#FFFFFF;" >Total Result Search</td><td>&nbsp;&nbsp; </td><td bgcolor="#044396"  style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:5px 5px 5px 5px; color:#FFFFFF;">$num</td>
</tr>
</table>
end;
mysql_close();
?>

<div style=" height:500px;overflow: scroll;overflow-x:hidden; width:910px; ">
<table width="910"   cellspacing="0" cellpadding="10"   style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000; background:#f3f3f3; padding:1px 1px 10px 1px; text-align:left;">
<tr style="font-size:12px; text-align:left;">

<td bgcolor="#CCCCCC">Photo</td>
<td bgcolor="#CCCCCC">Name</td>
<td bgcolor="#CCCCCC">Religion</td>
<td bgcolor="#CCCCCC">Cities</td>
<td bgcolor="#CCCCCC">State</td>
<td bgcolor="#CCCCCC">E-Mail</td>

</tr>
<!--</table>-->
<?php
$i=0;
while ($i < $num)
 {


$f3=mysql_result($query_for_result,$i,"candi_pic_1");
$f4=mysql_result($query_for_result,$i,"name");
$f5=mysql_result($query_for_result,$i,"religion");
$f6=mysql_result($query_for_result,$i,"city");
$f7=mysql_result($query_for_result,$i,"state");
$f8=mysql_result($query_for_result,$i,"email_id");

?>
<tr valign="top"  >
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo "<img src='pic/".$f3."' height='120' width='100'>";?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f4; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f5; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f6; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f7; ?></td>
<td style="border-bottom:#cdcdcd solid; border-bottom-width:1px;"><?php echo $f8; ?></td>

</tr>
<?php
$i++;

}
}
else {
echo "<script> alert('No Data Found')</script>";
}
?></table></div>
</td>
</tr></table>
</center>


One more thind my query is not appropriate to search so if any of you have any idea related matrimonial website serch code than pls share that too.

thanks
Posted
Updated 6-Oct-12 0:54am
v5
Add a Solution
Comments
enhzflep 6-Oct-12 6:41am    
Please show the code you have to display the images vertically. Are you using tables or divs? Or are you simply appending each image one after the other. The correct(read: best) solution depends on the existing framework (your page)
It may also depend on the css.

2 solutions

I imagine that you're showing profiles, 1 profile per row, horizontally.

While you'd like to display the images next to one another, with the profile information shown below each image.

If so, you may like to look over the following mark-up. The first table does what I imagine your code does, while the second uses tables nested inside table cells.


1 - *f4*1 - *f5*1 - *f6*1 - *f7*1 - *f8*
2 - *f4*2 - *f5*2 - *f6*2 - *f7*2 - *f8*
3 - *f4*3 - *f5*3 - *f6*3 - *f7*3 - *f8*




1 - *f4*
1 - *f5*
1 - *f6*
1 - *f7*
1 - *f8*
2 - *f4*
2 - *f5*
2 - *f6*
2 - *f7*
2 - *f8*
3 - *f4*
3 - *f5*
3 - *f6*
3 - *f7*
3 - *f8*



Code:
HTML
<!DOCTYPE>
<html>
<head>
<style>
    table
    {
        border: solid 1px #505050;
    }

</style>
</head>
<body>
<table class='horiz'>
    <tr class='horiz'><td><img src='pic/*f3*'/></td><td>1 - *f4*</td><td>1 - *f5*</td><td>1 - *f6*</td><td>1 - *f7*</td><td>1 - *f8*</td></tr>
    <tr><td><img src='pic/*f3*'/></td><td>2 - *f4*</td><td>2 - *f5*</td><td>2 - *f6*</td><td>2 - *f7*</td><td>2 - *f8*</td></tr>
    <tr><td><img src='pic/*f3*'/></td><td>3 - *f4*</td><td>3 - *f5*</td><td>3 - *f6*</td><td>3 - *f7*</td><td>3 - *f8*</td></tr>
</table>
<hr>
    <table class='vertical'>
        <tr>
            <td>
                <table>
                    <tr><td><img src='pic/*f3*'/></img></td></tr>
                    <tr><td>1 - *f4*</td></tr>
                    <tr><td>1 - *f5*</td></tr>
                    <tr><td>1 - *f6*</td></tr>
                    <tr><td>1 - *f7*</td></tr>
                    <tr><td>1 - *f8*</td></tr>
                </table>
            </td>

            <td>
                <table>
                    <tr><td><img src='pic/*f3*'/></img></td></tr>
                    <tr><td>2 - *f4*</td></tr>
                    <tr><td>2 - *f5*</td></tr>
                    <tr><td>2 - *f6*</td></tr>
                    <tr><td>2 - *f7*</td></tr>
                    <tr><td>2 - *f8*</td></tr>
                </table>
            </td>

            <td>
                <table>
                    <tr><td><img src='pic/*f3*'/></img></td></tr>
                    <tr><td>3 - *f4*</td></tr>
                    <tr><td>3 - *f5*</td></tr>
                    <tr><td>3 - *f6*</td></tr>
                    <tr><td>3 - *f7*</td></tr>
                    <tr><td>3 - *f8*</td></tr>
                </table>
            </td>

        </tr>
    </table>

</body>
</html>
 
Share this answer
 
Posted
Comments
[no name] 6-Oct-12 7:42am    
Thanks but will it work this in my code because value coming dynamically form database and tr and td creating dynamically.
enhzflep 6-Oct-12 8:02am    
Er, the point is that this is the structure of html you need to create from within your php file.

Just adjust your code so you output in this format rather than the current one. I don't have your database, can't be bothered creating one and don't feel in the mood for php coding in the dark. So, with that in mind - I've not offered you 'the answer' but rather the format that you need to output it in.

Why not make a function that takes 6 vars and makes a user-profile table from that?

e.g using this function, we create the below markup
function makePersonTable($imgFile, $name, $religon, $city, $state, $email)
{
$result = "<table><tbody>"
. "<tr><td><img src='$imgFile'/></td></tr>"
. "<tr><td>$name</td></tr>"
. "<tr><td>$religon</td></tr>"
. "<tr><td>$city</td></tr>"
. "<tr><td>$state</td></tr>"
. "<tr><td>$email</td></tr>"
. "</tbody></table>";
return $result;
}

<table>
<tr><td><img src='pic/*f3*'/></img></td></tr>
<tr><td>1 - *f4*</td></tr>
<tr><td>1 - *f5*</td></tr>
<tr><td>1 - *f6*</td></tr>
<tr><td>1 - *f7*</td></tr>
<tr><td>1 - *f8*</td></tr>
</table>
HTML
<center>
<table width="910" border="0" cellspacing="0" cellpadding="3" style="color:#303030; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:18px; text-align:left;">
<!--<tr bgcolor="#e5e5e5">
<td colspan="5" class="mainname">Search Result</td>
</tr>-->
<tr>
<td>
if(isset($_POST['Search']))
{
/*echo "<script> alert('hello')</script>";*/
$gender=$_POST['gender'];
$agemin=$_POST['agemin'];
$agemax=$_POST['agemax'];
$hmin=$_POST['hmin'];
$hmax=$_POST['hmax'];
$religion=$_POST['religion'];
$marital_status=$_POST['marital_status'];
$city=$_POST['city'];
$state=$_POST['state'];
$country=$_POST['country'];
 include("db.php");

//$query_for_result=mysql_query("select * from matri_user_info where (gender='$gender') or (age between $agemin and $agemax) or (height between $hmin and $hmax) or (religion='$religion') or (marital_status='$marital_status') or (city ='$city') or (state='$state') or (country='$country');");

$query_for_result=mysql_query("select * from matri_user_info where (gender='$gender') and (age between $agemin and $agemax) and (height between $hmin and $hmax) and (status='unlock');");

$num=mysql_num_rows($query_for_result);
echo <<<end>
<table align="right">
<tr>
<td bgcolor="#6f0d00" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3px 5px 3px 5px; color:#FFFFFF;">Total Result Search</td><td>   </td><td bgcolor="#000000" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3px 5px 3px 5px; color:#FFFFFF;">$num</td>
</tr>
</table>
end;
mysql_close();
?>

<div style="width:940px; ">

$cols=4;		// Here we define the number of columns
	echo "<table width="940" cellspacing="0" cellpadding="0" align="center" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000; background:url(mmjs-image/tad-bg.jpg) repeat-y; margin:15px 10px 0px 0px; padding:35px 1px 10px 10px; text-align:left;">";	// The container table with $cols columns
	do{
		echo "<tr>";
		for($i=1;$i<=$cols;$i++){	// All the rows will have $cols columns even if
									// the records are less than $cols
			$row=mysql_fetch_array($query_for_result);
			if($row){
				//$img = $row['candi_pic_1'];
				
				$f1=$row["reg_id"];
$f2=$row["name"];
$f3=$row["candi_pic_1"];
$f4=$row["name"];
$f5=$row["religion"];
$f6=$row["city"];
$f7=$row["state"];
$f8=$row["email_id"];
$f9=$row["age"];
$f10=$row["height"];
$f11=$row["city"];
$f12=$row["education"];

				
				
				
 ?>
        <td>
            <table>
                <tr valign="top">
                
                <td width="22" valign="top"> </td>
                
                <td bgcolor="#6f0d00" width="150" valign="top" style="padding:10px 0px 10px 10px"><?php <br mode="hold" /?>				
				if($f3=="")
{
 echo "<img src="pic/noimage.jpg" height="159" width="138" style="border:solid 1px #FFFFFF;">";
 }
 else{
//echo "<img src="pic/".$f3."" height="159" width="138" style="border:solid 1px #FFFFFF;">";
 
          $filename = 'pic/'.$f3;
		// $filename="<img src="pic/".$f3."" height="159" width="138" style="border:solid 1px #FFFFFF;">";
 
   if (file_exists($filename)) {
    echo "<img src="pic/".$f3."" height="159" width="138" style="border:solid 1px #FFFFFF;">";
   } 
  else {
     echo "<img src="pic/noimage.jpg" height="159" width="138" style="border:solid 1px #FFFFFF;">";
     }
 

 }
				
				?></img></img></img></img></img></td>
                       </tr>
                       
                       <tr valign="top">
                       <td width="22" valign="top"> </td>
                <td width="150" valign="top">MMJS Id: <?php echo $f1;??><br />Name: <?php echo $f2; ??><br />Age:<?php echo $f9; ??><br />Education: <?php echo $f12; ??> <br /> city: <?php echo $f11; ??><br /><a href="profile-page.php?reg_id=<?php echo $f1; ?>" class="red-more">View Full Profile</a></td>

                       </tr>
           </table>
        </td>
			}
			else{
				echo "<td> </td>";	//If there are no more records at the end, add a blank column
			}
		}
	} while($row);
	echo "</tr></table>"; }
else {
echo "<script> alert('No Data Found')</script>";
}
?></div></end></td></tr></table>


</center>
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Show Multiple rows in horizontal in a gridview
how to show image in gridview horizontly by database in asp.net
show image from database in asp.net
Values are not showing in database
How to save an edit form with multiple images in blazor
a form having multiple listboxes....listboxes are greater than the size of form so we using horizontal scroll bar....bt it having no show any results..
Show multiple images on HTML page.
how to retrive image form database and show in image control in asp.net
Showing multiple Images after uploading
Want to show multiple images in ASP.NET core web api using jquery

Advertise
Privacy
Cookies
Terms of Use
Last Updated 24 Jan 2013
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-05-14:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900