I created a custom cms for a website and trying to make the nivo slider work with my db but im having issues with my while loop.
im only storing the name of the image in the db and the image itself its in a folder, images are working somewhat but they appear on above the other the the actual slideshow is broken.
my guess is that the title id is breaking it but not sure on how to go from here. any help is appreciated
here is my code:
<div id='slider' class='nivoSlider'>
<?php
$sql = 'SELECT * FROM slider';
$result = $db->query($sql) or die(mysqli_error());
while($row = $result->fetch_assoc()){
$slideshow = $row['slider_id'];
print"
<img src='images/slider/".$row['image'].".jpg' alt='' title='#htmlcaption'>
</div>
<div id='htmlcaption' class='nivo-html-caption '>
<span>".$row['title'] . "</span>
</div> ";
}
?>
<div id='preloader'></div>
</div>
while($row = $result->fetch_assoc()){
$slideshow = $row['slider_id'];
print"
<img src='images/slider/".$row['image'].".jpg' alt='' title'#htmlcaption'>
</div> // ---------------> Here you are closing div slider
<div id='htmlcaption' class='nivo-html-caption '>// ----> Error
<span>".$row['title'] . "</span>
</div> ";
}
In while loop you are closing </div> without opening it,This cause broken slide show.In HTML syntax id's must be unique. So <div id='htmlcaption' class='nivo-html-caption '> so change this part.
[Update]
change print to
print" <div class='some_wraper'>
<img src='images/slider/".$row['image'].".jpg' alt='' title='#htmlcaption'>
</div> // ---------------> Here now you are closing div some_wraper
<div class='nivo-html-caption htmlcaption'>// ----> added new class htmlcaption
<span>".$row['title'] . "</span>
</div> ";
Update
Fixed code
<div id='slider' class='nivoSlider'>
<?php
$sql = 'SELECT * FROM slider';
$result = $db->query($sql) or die(mysqli_error());
for($i = 0;$row = $result->fetch_assoc();$i++){
$slideshow = $row['slider_id'];
echo "<img src='images/slider/".$row['image'].".jpg' alt='' title='htmlcaption_$i'>";
$tiles[$i]=$row['title'];
}
?>
</div>
<?php //caption divs for slider
for($i=0;$i<count($tiles);$i++) {
echo "<div id='htmlcaption_$i' class='nivo-html-caption '>";
echo "<span>".$tiles[$i]."</span> </div>";
}
?>
<div id='preloader'></div>
</div>
Related
I want to display images in same row,but i can display only under each other. I tried in css display: inline-block; but dont working. Any idea what i need to do? Thanks
The code for display images:
require_once 'dbConfig.php';
$result = $db->query("SELECT image FROM images ORDER BY uploaded DESC");
?>
<?php if($result->num_rows > 0){ ?>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3" >
<a class="lightbox">
<?php while($row = $result->fetch_assoc()){
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'" width="250", " height="250">';}?>
<?php }else{ ?>
<p class="status error">Image(s) not found...</p>
<?php } ?>
</a>
</div>
</div>
It's because you large col is only 3.
Inspect element result
if you are using these images for lightbox thumbnail I would suggest d-flex rather than column system....
Try this code it will work .. now it will loop your columns as well
require_once 'dbConfig.php';
$result = $db->query("SELECT image FROM images ORDER BY uploaded DESC");
?>
<?php if($result->num_rows > 0){ ?>
<div class="row">
<?php while($row = $result->fetch_assoc()){
<div class="col-sm-6 col-md-4 col-lg-3" >
<a class="lightbox">
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'" width="250", " height="250">';}?>
</a>
</div>
<?php }else{ ?>
<p class="status error">Image(s) not found...</p>
<?php } ?>
</div>
I have a working code that can insert and update information from the database and echoing it to page. but I like to hide the specific empty column while displaying all the information from the row. check this screenshot
my goal is to hide the "image" column when its null/empty; so the crock image wont display. here is my code below:
<?php
$result = mysqli_query($mysqli, "SELECT * FROM blogs ORDER BY id DESC");
while ($row = mysqli_fetch_array($result))
if (!empty($row['image'] != ""))
{
echo "<div class='row'>
<div class='col-lg-12 box'>
<div class='content-heading'>
<p>
<text>".$row['title']."</text>
</p>
</div>
<p>
<text1 class='pull-right' >".$row['image_text']."</text1><br/>
<img class='img-size' id='hp'src='admin/upload_images/".$row['image']."'/>
<text>".$row['definition']."</text>
</p>
</div>
</div>";
}
?>
but this code if (!empty($row['image'] != "")) is hiding the entire row from my database.
Can anyone have a right solution to my problem?
You could try using the style attribute of the <img> tag to selectively show or hide the image tag:
<img class='img-size'
id='hp'
style='display: '. ($row["image"] != "" ? "block" : "none") . ';'
src='admin/upload_images/".$row['image']."'/>
Instead of hiding entire row, you could just hide the image tag, like this:
<?php
$result = mysqli_query($mysqli, "SELECT * FROM blogs ORDER BY id DESC");
while ($row = mysqli_fetch_array($result))
{
echo "
<div class='row'>
<div class='col-lg-12 box'>
<div class='content-heading'>
<p>
<text>".$row['title']."</text>
</p>
</div>
<p>
<text1 class='pull-right' >".$row['image_text']."</text1><br/>
";
if (!empty($row['image'])) {
echo "<img class='img-size' id='hp'src='admin/upload_images/".$row['image']."'/>";
}
echo "
<text>".$row['definition']."</text>
</p>
</div>
</div>
";
}
?>
Your if condition will hide all other html elements as well instead you should hide only img tag when no value found for image.
Update your code as below :
while ($row = mysqli_fetch_array($result)) {
$image = (!empty($row['image'])) ? "<img class='img-size' id='hp'src='admin/upload_images/" . $row['image'] . "'/>" : "";
echo "<div class='row'>
<div class='col-lg-12 box'>
<div class='content-heading'>
<p>
<text>" . $row['title'] . "</text>
</p>
</div>
<p>
<text1 class='pull-right' >" . $row['image_text'] . "</text1><br/>
" . $image . "
<text>" . $row['definition'] . "</text>
</p>
</div>
</div>";
}
I need tips or direction on how can I display data from mysql using echo. But I want to display it in html code. I want to display $row["title"] of first title in mysql instead title1 and $row["content"] of first content in mysql instead content1 and do that for all 3 divs. php code works fine I just can't figure out how to make that possible.
<div class="carousel-inner" style="background-size:cover;">
<div class="item active">
<img src="img/road1.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>title1</h2>
<p>content1</p>
</div>
</div>
<div class="item">
<img src="img/road2.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>title2</h2>
<p>content2</p>
</div>
</div>
<div class="item">
<img src="img/road3.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>title3</h2>
<p>content3</p>
</div>
</div>-->
<?php
session_start();
include_once("db.php");
$sql = "SELECT * FROM news";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
while($row = mysqli_fetch_assoc($query)) {
echo "<h2>" . $row["title"] . "</h2>";
echo "<p>" . $row["content"] . "</p>";
}
} else {
echo "0 results";
}
?>
You're almost there. Just move the html into the echo of the while loop.
echo '<div class="carousel-inner" style="background-size:cover;">';
$counter = 1;
while($row = mysqli_fetch_assoc($query)) {
echo '
<div class="item ' . ($counter == 1 ? 'active' : '') . '">
<img src="img/road{$counter}.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>' . $row["title"] . '</h2>
<p>' . $row["content"] . '</p>
</div>
</div>';
$counter++;
}
echo '</div>';
The only issue is the image, realistically you'd save the image in the database with the title and content then use the same method but for this simple case lets just use a counter
please note that I change your entire code a little bit to make the desired results...
<div class="carousel-inner" style="background-size:cover;">
<?php
session_start();
include_once("db.php");
$sql = "SELECT * FROM news";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
while($row = mysqli_fetch_assoc($query)) { ?>
<div class="item active">
<img src="img/road1.jpg">
<div class="carousel-caption d-none d-md-block">
<h2><?php echo $row["title"]; ?></h2>
<p><?php echo $row["content"]; ?></p>
</div>
</div>
<?php
}
} else {
echo "0 results";
}
?>
Also note that I'm repeating just the first image... You need an extra on planning to determine how to handle images in code and then update this one.
The search results should display like this
But my results are stacking on top of each.
Here is my code :
<div class="container">
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("thesis") or die(mysql_error());
$search = trim( $_POST['SearchKeywords']);
$query = " SELECT * FROM new_data WHERE Product_Title or Product_link LIKE'%$search%' ";
$sql = mysql_query($query) or die(mysql_error());
$count = mysql_num_rows($sql);
$count == 0;
if ($count == 0) {
echo "Sorry, Nothing Found !!";
}else{
while ($row = mysql_fetch_array($sql))
{
$img = $row ['Product_Img'];
$link = $row ['Product_link'];
$title = $row ['Product_Title'];
$price = $row ['Product_Price'];
?>
<div class="card">
<div class="front alert alert-success">
<?php echo "$title";
echo "<img src='$img' width='80px' height='100px'>";
echo "$price"; ?>
</div>
</div>
<?php
};
};
?>
</div> <!-- Container -->
Those div blocks are inside a container.
I added a bootstrap class in order for better a design.
You can use thumbnails with custom content
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
I used a counter inside while loop.
Which will check, when there are already 4 blocks/ products in a single row then it will create a new row
<?php
if($productCount == 0)
{
echo "<div class='row'>"; }
}
$productCount++;
if($productCount==4)
{
echo "</div>" ;
$productCount = 0;
}
?>
I have a page with a search bar that gets images of people in alphabetical order from a database. I also have a page with Next and Previous buttons that allows the user to browse through the database of images using Next and Previous buttons. I'm trying figure out a way to make an image a link so that the user can search through images, click the image, and it takes them to the same image on the Next and Previous page.
This is my code that allows me to search and returns, lastname, firstname, and a picture:
<div class="clearfix"></div>
<?php
if (isset($_GET['LastName'])) {
$ln = $_GET['LastName'];
}
include 'connection.php';
$query = "SELECT * FROM residents WHERE LastName like '$ln%' ";
$result = mysql_query($query);
while($person = mysql_fetch_array($result)) { ?>
<div class="media col-sm-4">
<a class="pull-left" href="Browse.php">
<img class="media-object" src="upload/<?php echo $person['Picture'];?>" width="100"
height="100"/>
</a>
<div class="media-body">
<h4 class="media-heading"><?php echo $person['LastName'] . ", " .
$person['FirstName']; ?></h4>
</div>
The page I'm trying to connect to is "Browse.php" but as you browse through the images the URL changes by increasing..."Browse.php?page=1"..."Browse.php?page=2" and so on. Is there an easy way to connect an image with the corresponding Browse.php page? I've tried several things and any help would be much appreciated!
If you have id column in residents table. You can do something like this.
<div class="clearfix"></div>
<?php
if (isset($_GET['page'])) {
$page_id = $_GET['page'];
}
include 'connection.php';
$query = "SELECT * FROM residents WHERE ID = $page_id";
$result = mysql_query($query);
while($person = mysql_fetch_array($result)) { ?>
<div class="media col-sm-4">
<a class="pull-left" href="Browse.php?page=<?php echo $page_id; ?>">
<img class="media-object" src="upload/<?php echo $person['Picture'];?>" width="100" height="100"/>
</a>
<div class="media-body">
<h4 class="media-heading"><?php echo $person['LastName'] . ", " . $person['FirstName']; ?></h4>
</div>
</div>
<?php } ?>