I am trying to fetch data from a Mysql database (specifically images) and then display them in a carousel, like for example on the amazon.com homepage.
I am a beginner in CSS. I haven't used it much.
I have looked at a earlier question, but mine is not a list of images together. I just through the data from the database.
Any help will be appreciated.
From what I understood in your comment below, your problem is strictly related to CSS. The images are showing vertically because the <li> aren't floated next to each other.
Here's the code:
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>
<style type="text/css">
.jcarousel {position:relative; overflow:hidden;}
.jcarousel ul {width: 20000em; position:relative; list-style:none; margin:0; padding:0;}
.jcarousel li {float:left;}
</style>
</head>
<body>
<div class="jcarousel">
<ul>
<li><img src="image1.jpg" alt="" /></li>
<li><img src="image2.jpg" alt="" /></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$('.jcarousel').jcarousel();
});
</script>
</body>
</html>
I know this is an old question but it might be useful for future users. Here is a simple solution to implement a Bootstrap carousel to display images from database:
Fetch all imageID from the database and insert it in an array (note that I store the images as BLOB in my database:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.1.0.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<style>
.myCarousel{
height: 100%;
width: 700px ;
margin-top: 5px;
}
.slideimage{
width: 700px;
height: 320px !important;
}
</style>
</head>
<body>
<?php
include ('DBconnection.php');
$ImageArray = array();
$queryImages = "SELECT * FROM imagetable ";
$result = mysqli_query($conn,$queryImages);
if(mysqli_num_rows($result) >0){
while ($row = mysqli_fetch_array($result)){
$ImageArray[] = $row;
}
}
?>
<div id="myCarousel" class="myCarousel carousel
slideCarousel" data-ride="carousel" data-interval="5000" >
<ol class="carousel-indicators">
<?php
// creating indicators - note that at least one must be set as active
for($j=0;$j<count($ImageArray);$j++){
if($j==0){
echo ' <li data-target="#myCarousel" data-slide-to="'.$j.'" class="active"></li>';
}else{
echo ' <li data-target="#myCarousel" data-slide-to="'.$j.'"></li>';
}
}
?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
for($j=0;$j<count($ImageArray);$j++){
//If it is the first image set it as active
if($j==0){
echo '<div class="item active">
<!--Using image id and url -->
<img class="slideimage" src="GetImageID.php?id=' .$ImageArray[$j]['ImageID'].'" />
<!-- or using base64_encode
<img src="data:image/jpeg;base64,'.base64_encode($ImageArray[$j]['Image']).'"/>
-->
</div>';
}
else{
echo '<div class="item">
<img class="slideimage" src="GetImageID.php?id=' .$ImageArray[$j]['ImageID'].'" />
</div>';
}
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
The GetImageID.php:
include ('DBconnection.php');
$imageid = $_GET['id'];
$query = "Select Image from imagetable WHERE ImageID = '$imageid'";
$result = mysqli_query($conn,$query);
$row = mysqli_fetch_array($result);
header("Content-type: image/jpeg");
echo $row['Image'];