I have a script that gets images from a database and displays them on exploretest.php page. I need each image to have a separate download button under each image which allows people to download that image but am unsure on how to go about this. Any help would be appreciated.
<?php
display();
function display(){
$conn = mysqli_connect("localhost","root","","loginsystem");
$sql="select * from testimage";
$query=mysqli_query($conn, $sql);
$num=mysqli_num_rows($query);
for ($i=0; $i < $num; $i++) {
$result=mysqli_fetch_array($query);
$img=$result['image'];
echo '<img class="exploreimg" src="data:image;base64, '.$img.'" style="max-height:300px;max-width:300px; margin-left:50px; margin-right:50px; padding-bottom:20px; padding-top:30px;">';
}
}
?>
echo '<img src="img/downloadbutton.png" alt="Download" style="max-height:50px; max-width: 100px; float: center; line-height: 10; "/>';
Related
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body{
background: lightblue;
margin: 25px;
}
.title{
font-size: 20px;
}
.recipe{
width: 60%;
}
.related{
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
}
.a{
float: right;
right: 5px;
}
.relatedImages{
}img{
width: 15%;
height: 17%;
}
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++){
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
};
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++){
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
}
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == ""){
$instructions = "Whoops, there are no available instructions for this recipe.";
}
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++){
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++){
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
// }
//}
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++){
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
}
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == ""){
$instructions = "Whoops, there are no available instructions for this recipe.";
}
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++){
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++){
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
// }
//}
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++){
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
};
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent {
display: grid;
grid-template-columns: 70% 30%;
}
body{
background: lightblue;
margin: 25px;
}
.title{
font-size: 20px;
}
.recipe{
width: 60%;
}
.related{
list-style-position: inside;
}
.a{
float: right;
right: 5px;
}
.relatedImages{
}img{
width: 15%;
height: 17%;
}
</style>
this should work, i couldnt test it
This is main problem of my system I can display images and their names but it cant't be a horizontal.. Need help please. Cause when I run my codes the images will be vertically but I want to be in a horizontal
Here;s the code:
echo'<?php $src=array("candidates/images/".$rows["image"]); for($i=0;$i<2;$i++){ ?>';
echo '<div clas ="image">';
echo '<img src="candidates/images/'.$rows['image'].'" width="10" height="20px" />'.', '.'<br>'.$rows['lastname'].', '.$rows['firstname'].'<br>'.' = '.$rows['votes'];
// echo '<br>';
}
$sdsd=$dsada
?>
<img src="candidates/images/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
// echo(100*round($rows['votes']/($sdsd),2)); /
/*?>%<br>*/
/*<?php
}
*/echo '</div>';
}
}
Here's the CSS:
.image {
position: relative;
width: 150px;
display: inline-bloxk;
}
Remove the <br> ?
echo ''.', '.''.$rows['lastname'].', '.$rows['firstname'].''.' = '.$rows['votes'];
I have a procedural while loop that echos out rows in my DB like:
echo '<tr align="left"> <td>'.$row['address'].','.$row['state'].'</td>'.
'<td><a href="'.$row['shopurl'].'">'.$row['datedesc'].'</td>'.
'</tr>';
And works great! The problem now is that I need to add a "SOLD OUT" png across the address & state, of only one (currently) of the rows. I have CSS:
#sold-out{
background-image: url("/graphics/png/soldout.png");
}
With the image as the back-ground.
How can I add a Z-Index to php inside a While loop?
Thanks in advance!
You do not add z-index to PHP, you add it to CSS. However, in this case, you can simply print out an absolutely positioned div with the image in the td that you want.
PHP
foreach ($rows as $row) {
echo '<tr align="left">
<td>';
//conditional to determine if row is sold out
if ($row['soldOut'] === 'yes') {
echo '<div class="sold-out"> </div>';
}
echo $row['address'].','.$row['state'].'</td>'.
'<td><a href="'.$row['shopurl'].'">'.$row['datedesc'].'</td>'.
'</tr>';
}
CSS
.sold-out {
position:absolute;
background-image: url("/graphics/png/soldout.png");
opacity: 0.8;
top: 0;
left: 0;
right: 0;
bottom: 0;
The problem can be shown here. I was experimenting with thousands of fixed div boxes to create a randomly generated background. I am aware this has a big impact on performance.
However, I was wondering if there was any solution to the strange white lines in the background of my webpage. I am almost 100% certain there is nothing wrong with my php & css that is determining where the boxes are placed in my background but, here it is just in-case.
define('ROWS', 100);
define('COLUMNS', 100);
$boxes = array();
for($i = 0; $i < ROWS; $i++) {
$boxes[] = array();
for($j = 0; $j < COLUMNS; $j++) {
$boxes[$i][$j] = randColor();
?>
#back<?php echo $i*COLUMNS + $j; ?> {
background: #<?php echo $boxes[$i][$j]; ?>;
width: <?php echo 100.0/COLUMNS ?>%;
height: <?php echo 100.0/ROWS ?>%;
left: <?php echo $j * 100.0/COLUMNS?>%;
top: <?php echo $i * 100.0/ROWS ?>%;
position: fixed;
z-index: -300;
}
Try instead using <canvas> and split the canvas up in pieces instead of divs. It is a rectangular area in a HTML file on which you can draw anything including parts.
Example: Draw a Circle
Javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Html
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Here is my Code:
<?php
$qr = mysql_query("SELECT * FROM products");
while($res = mysql_fetch_array($qr)):
?>
<div class="box">
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
I want the output of the fetched record like this http://jsfiddle.net/CqYhE/3/
Please help me that how can I apply margin of 10px on both sides (left & right), only on the center div of each row when printing it with php loop.
Here is your solution:
This will work for N divisions.
<?php
$qr = mysql_query("SELECT * FROM products");
$count = 1;
$margin='';
while($res = mysql_fetch_array($qr)):
$count == 2 ? $margin='style="margin:0px 10px;"' : $margin = '';
$count == 3 ? $count = 1 : $count++;
?>
<div class="box" <?php echo $margin; ?>>
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
Use css :first-child and :last-child selectors
#container .box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
#container .box:first-child,
#container .box:last-child { margin-left:0px; margin-right:0px;}
if you have Multiple Rows you will need to change you html to make it easy : See This DEMO
This is best achieved with a CSS solution. If you forget about the left margin and just apply a right one you can then remove it from the last-child. Fewer lines of CSS so better performance.
.box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin: 0 20px 10px 0;
}
.box:last-child {
margin-right: 0;
}