I would like to know how to display multiples images from MySQL in Html.
I have two files:
photogallery.php where I display the image and gallery.php where I have the php code.
This works but I can only display 1 image and I can't see all images!
Here is the code for photogallery.php where I display the photo:
<div align='left'>
<img src='gallery.php' height='95' width='95'/>
</div>
and here is the code for gallery.php:
session_start();
$host = "localhost";
$username = "root";
$password = "";
$db_name = "photos";
$tbl_name="gallery";
mysql_connect("$host","$username","$password")or die ("error22");
mysql_select_db("$db_name") or die("error2");
$ussername=$_SESSION['username'];
$query= mysql_query("SELECT * FROM $tbl_name where username='$ussername'");
while($row= mysql_fetch_assoc($query)){
$imageData=$row["image"];
//header("content-type:image/jpeg");
echo $imageData;
}
Thank you!
If you have image data stored on the database with a function like get_file_contents :
while($row= mysql_fetch_assoc($query)){
$imageData=$row["image"];
echo "<div align='left'>";
echo " <img src='data:image/jpeg;base64,"
. base64_encode($imageData) . "' height='95' width='95'/>";
echo "</div>";
}
if we assume that $row["image"] is path to image, then you should change your code like below:
...
while($row= mysql_fetch_assoc($query)){
$imageData=$row["image"];
?>
<div align='left'>
<img src='<?php echo $imageData;?>' height='95' width='95'/>
</div>
<?php
}
...
I don't execute my code, I want show you only idea
Related
I have developed a page where i display image from the database along with its image name.
I managed to display the names and imagenames from the database successfully, but the images and imagenames are aligned like:
IMG1 IMG2 IMG3 IMGname1 IMGname2 IMGname3
The code i tried to display the images and its name from the database:
<div class='badgeicon'>
<?php
$sql = "SELECT * FROM badges WHERE badge_id='$id_badge'";
$result = mysqli_query($db,$sql) or die(mysqli_error($db));
while($row = mysqli_fetch_array($result)){
$image_src2 = $row['badge_image'];
$imagedes = $row['description'];
?>
<img src= "<?php echo $image_src2; ?>" width="130px" height="140px">
<?php echo $imagedes; ?>
I expect the output to be :
IMG1 IMG2 IMG3
IMGname1 IMGname2 IMGname3
i.e., with the imagenames directly under the respective images.
I think your best bet is to format with css.
<div class="image">
<img src= "<?php echo $image_src2; ?>" width="130px" height="140px">
<span class="description"><?php echo $imagedes; ?></span>
</div>
And here for the style
.image{
display: inline-block;
}
.description{
bottom: 0;
}
You can do a lot more depending on exactly what you are trying to achieve.
I think this should be what you are looking for, keeping the img and name in a loop:
<div class='badgeicon'>
<?php
$sql = "SELECT * FROM badges WHERE badge_id='$id_badge'";
$result = mysqli_query($db,$sql) or die(mysqli_error($db));
$fetchresult = mysqli_fetch_array($result);
foreach($fetchresult as $row){
echo '<img src="'.$row['badge_image'].'" width="130px" height="140px">';
echo $row['description'];
}
?>
<?php
$servername = "*****";
$username = "****";
$password = "";
$dbname = "****";
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$product_id = intval($_GET['product_id']);
// make sure its only an id (SQL Incjection problems)
$sql = "SELECT * FROM product_gallery WHERE pid=$product_id";
$result = mysqli_query($conn, $sql);
if ($result->num_rows > 0) {
while ($row = mysqli_fetch_array($result)) {
echo"<div class='tg-productbox'>";
echo" <div id='tg-thumblider' class='tg-thumblider tg-productgalleryslider owl-carousel'>";
echo" <figure class='item'><img src='$row[product_image]' alt='image description'></figure>";
echo" </div>";
echo" </div>";
echo" </div>";
};
} else {
echo "0 results";
}
$conn->close();
?>
This is my php code to view multiple images from database.but I can only see one image in front end.please help me..there is a main image and a slider to view to multiple images. It is similar to how we see product images in a shopping site
this is my php code to view multiple images from database.but i can only see one image in front end.please help me..there is a main image and a slider to view to multiple images.its is similar to how we see product images in a shopping site
There are some other mistakes like one extra closing div in loop and semicolon }; which not necessary.
Try something like below if you are getting multiple records it will definitely work.
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
<div class='tg-productbox'>
<div id='tg-thumblider' class='tg-thumblider tg-productgalleryslider owl-carousel'>
<figure class='item'>
<img src="<?php echo $product_image; ?>" alt="image description">
</figure>
</div>
</div>
<?php
}
Changes
Remove id='tg-thumblider' from echo "<div id='tg-thumblider' class='tg-thumblider. ID must need to be unique. According to the code provided, In while loop, every <div> will have same ID, which is wrong. So, either remove that ID or give some unique ID to each div.
Remove extra echo "</div>";
Remove ; from closing of while loop.
Code:
<?php
if ($result->num_rows > 0) {
while ($row = mysqli_fetch_array($result)) {
echo "<div class='tg-productbox'>";
echo "<div class='tg-thumblider tg-productgalleryslider owl-carousel'>";
echo "<figure class='item'><img src='".$row['product_image']."' alt='image description'></figure>";
echo "</div>";
echo "</div>";
}
}?>
So guys I have made a admin system which saves images to a specific folder with specific id according to rows in database.
The picture is in the folder but its not showing..
MY index.php CODe:
<?php
include 'admin/connect.php';
$sql = "SELECT * FROM products";
$run = mysqli_query($conn, $sql);
while ($row = $run->fetch_assoc()) {
$id = $row['id'];
?>
<img src="inventory_images/"<?php echo $id; ?> />
<?php
}
?>
Try removing the " before you echo the id and adding it at the end:
<img src="inventory_images/<?php echo $id; ?>" />
(otherwise your image link is inventory_images/"54 for example)
Im making a page that will display top ten voters in a table and show the number one voter aswell. I got the top ten table to work but I can't figure out how to get the second part to work. What would I do to get it to work where it would show the top voter in a img tag like this example
img src="https://minotar.net/avatar/TOPVOTERHERE"
First part
<div class="col-md-6">
<table class="table table-striped">
<tr>
<td><strong>Username</strong></td>
<td><strong>Votes</strong></td>
</tr>
<?php
$username2 = "exampleuser";
$password2 = "pass";
$hostname = "127.0.0.1";
$dbhandle = mysql_connect($hostname, $username2 , $password2)
or die("Unable to connect to MySQL");
$selected = mysql_select_db("mc711",$dbhandle)
or die("Could not select database");
$result = mysql_query("SELECT * FROM GALTotals ORDER BY votes DESC");
$count = 0;
while ($row = mysql_fetch_assoc($result)) {
$count++;
if($count>10){
}else{
echo "<tr>";
echo "<td>".$row['IGN']."</td>";
echo "<td>".$row['votes']."</td>";
echo "</tr>";
}
}
?>
</table>
</div>
Second Part - This is the part I dont know how to do
<div class="col-md-6">
<center>
<img src="https://minotar.net/avatar/TOPVOTERHERE">
</center>
</div>
The simplest way to do it would be to create a variable to store the top voter data before you start your while loop. Then, in the while loop, you can set this variable if you're in the first iteration.
First part:
$result = mysql_query("SELECT * FROM GALTotals ORDER BY votes DESC");
$count = 0;
$topVoterIGN = NULL;
while ($row = mysql_fetch_assoc($result)) {
$count++;
if($count>10){
}else{
echo "<tr>";
echo "<td>".$row['IGN']."</td>";
echo "<td>".$row['votes']."</td>";
echo "</tr>";
if(is_null($topVoterIGN)) {
$topVoterIGN = $row['IGN'];
}
}
}
Second Part:
<div class="col-md-6">
<center>
<img src="https://minotar.net/avatar/<?php echo $topVoterIGN; ?>">
</center>
</div>
Alternatively, you can store the top 10 voters in an array and then retrieve the first item later.
I am doing gallery and I need some help. I have uploaded images to database through website - they are stored in MySQL (names) and in folder called images. What I want is to display (miniatures) them in line and on click enlarge them.
What my code does is displaying miniatures and links them to nothing :/ ...
This is my code:
<?php
$hostname_connect= "localhost";
$database_connect= "gallery";
$username_connect= "root";
$password_connect= "root";
$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
#mysql_select_db($database_connect) or die (mysql_error());
$query_image = "SELECT * FROM gallery_images";
$result = mysql_query($query_image);
if(mysql_num_rows($result) > 0)
{
while($row = mysql_fetch_array($result))
{
?>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
while($row = mysql_fetch_array($result))
{
?>
<div id="light" class="white_content">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="" alt=""></a>';
?>
Close
</div>
<?php
}
}
else
{
echo 'File name not found in database';
}
?>
You are using this in a loop:
<div id="light" class="white_content">
So you will have multiple elements with the same ID and that is not allowed.
Then you try to access them like:
document.getElementById('light')
Which will give you the first element it finds and not the actual one you want to enlarge (unless it is the first...).
Personally I would use the standard lightbox solution, link your thumbnail to your big image (instead of javascript:void(0)) and use the href attribute of your link to set the source for the big image using javascript when the thumbnail gets clicked.
Edit: An example for the html to get you started:
<?php
while($row = mysql_fetch_array($result))
{
?>
<a href="<?php echo 'images/'.$row["image"]; ?>" onclick="return showImage(this);">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
?>
<div id="light"><img src='' alt=''></div>
Now you just have to write the showImage() function in javascript that will do the actual work:
get the href attribute of the clicked link;
set the source of the image in #light to that value;
show the #light element.