I have to echo a blob image in a carousel but I am not able to use single quotes for the img tag line because of the base64_encode() can someone explain me how to use the double quotes for the img line. Thanks !!!!
Here is my code :
echo "
<div id=\"Carousel$i\" class=\"myCarousel carousel slideCarousel\" data-ride=\"carousel\" data-interval=\"5000\">
<ol class=\"carousel-indicators\">
<li data-target=\"#Carousel$i\" data-slide-to=\"0\" class=\"active\"></li>
<li data-target=\"#Carousel$i\" data-slide-to=\"1\"></li>
<li data-target=\"#Carousel$i\" data-slide-to=\"2\"></li>
<li data-target=\"#Carousel$i\" data-slide-to=\"3\"></li>
</ol>
<div class=\"carousel-inner\" role=\"listbox\">
<div class=\"item active\">";
// HEREEEEE !!!!!!
echo '<img src=\"data:image/jpeg;base64,'.base64_encode($image).'\"/>';
echo "</div>
<div class=\"item\">
<img class=\"slideimage\" src=\"images/diving3.jpg\" alt=\"Chania\">
</div>
<div class=\"item\">
<img class=\"slideimage\" src=\"images/Ambergris-Divers-PADI-Scuba-Course.jpg\" alt=\"Chania\">
</div>
</div>
<a class=\"left carousel-control\" href=\"#Carousel$i\" 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=\"#Carousel$i\" role=\"button\" data-slide=\"next\">
<span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"></span>
<span class=\"sr-only\">Next</span>
</a>
</div>
";
This should work (stop using double quotes for echo-statements, just to avoid concatenating some strings.
echo '
<div id="Carousel'.$i.'" class="myCarousel carousel slideCarousel" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#Carousel'.$i.'" data-slide-to="0" class="active"></li>
<li data-target="#Carousel'.$i.'" data-slide-to="1"></li>
<li data-target="#Carousel'.$i.'" data-slide-to="2"></li>
<li data-target="#Carousel'.$i.'" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="data:image/jpeg; base64,'.base64_encode($image).'">
</div>
<div class="item">
<img class="slideimage" src="images/diving3.jpg" alt="Chania">
</div>
<div class="item">
<img class="slideimage" src="images/Ambergris-Divers-PADI-Scuba-Course.jpg" alt="Chania">
</div>
</div>
<a class="left carousel-control" href="#Carousel'.$i.'" 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="#Carousel'.$i.'" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
';
Related
I store my pictures that are uploaded on my website in the database, then when I load them in my website, I store them in an array. My problem is I want to display the pictures in a slideshow but because sometimes the array not always is the same, I cannot display it right!
I tried to do if statement but then the function of slideshow didn't work at all!
Also, My array works fine! just having a problem with displaying
$photosarray= array(); //array to store photos names
$count=0;
while ($row2=mysqli_fetch_array($res2))
{
$image=$row2['img_name'];
$photosarray[$count]=$image;
$count=$count+1;
}
echo'
<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</td>';
echo '
<p class="font-weight-bold">click the image to view in full
size.</p>
</div>
</tbody>
';
I expect that my slideshow works depending on how many images in the array! so is the array has only 2 images then the slideshow should only have 2 slides!
You need to display in a loop, change:
<div class="carousel-item active">
<img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
</div>
to
foreach($photosarray as $photo){
print('
<div class="carousel-item">
<img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
</div>
');
}
try this
<?php
$photosarray= array(); //array to store photos names
$count=0;
while ($row2=mysqli_fetch_array($res2))
{
$image=$row2['img_name'];
$photosarray[$count]=$image;
$count=$count+1;
}
echo'<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>';
foreach($photosarray as $photo){
echo '
<div class="carousel-item">
<img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
</div>
';
}
echo '<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</td>';
echo '<p class="font-weight-bold">click the image to view in full size.</p>
</div>
</tbody>
';
or
<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row2 = mysql_fetch_array($res2)){
?>
<div class="carousel-item<?php if($counter <= 1){echo " active"; } ?>">
<img alt="First slide image" src="<?php echo '../photo/'.$row2['img_name']; ?>"/>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
</div>
</div>
</td>
<p class="font-weight-bold">click the image to view in full size.</p>
</div>
My website already connect with database, but somehow bootstrap carousel that I use for slider not working... What I expected the image will be like this:
< image > < image > < image >
But what I get is:
<image>
<image>
<image>
I don't know what's wrong with my code... Can somebody help me?
<!--- Slider -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($slider as $slider): ?>
<div class="item active">
<img src="<?php echo base_url('upload/slider/'.$slider->image)?>">
<div class="carousel-caption">
<h3><?php echo $slider->name?></h3>
</div>
</div>
<?php endforeach; ?>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only"> previous</span>
</a>
<a class="right carousel-control" href="=#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only"> next </span>
</a>
</div>
I use this and work fine.
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<ol class="carousel-indicators">
<?php for($j=0; $j<count($slider); $j++) {?>
<li data-target="#myCarousel" data-slide-to="<?php echo $j; ?>" class=""></li>
<?php }; ?>
</ol>
<div class="carousel-inner" role="listbox" >
<?php $i=1;
foreach ($slider as $slider) { ?>
<div class="item <?php echo ($i==1) ? "active" : "" ?>">
<img src="<?php echo base_url('upload/slider/'.$slider->image) ?>" alt="" class="img-responsive" style="width:100%" title="">
<div class="carousel-caption">
<h3><?php echo $slider->name?></h3>
</div>
</div>
<?php $i++; } ?>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only"> previous</span>
</a>
<a class="right carousel-control" href="=#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only"> next </span>
</a>
<div class="carousel-line"></div>
</div>
I am trying to create a page with carousel using php fetching image and title from sql. I created a carousel using html and css, but im not really sure how to transfer it using php.
My original carousel:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/aa1.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news1.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="images/aa2.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news2.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="images/aa3.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news3.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div>
<div class="item">
<img src="images/aa4.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news4.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div>
<div class="item">
<img src="images/aa5.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news5.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div>
</div>
<ul class="list-group col-sm-4">
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
</ul>
<!-- Controls -->
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
Now I created a database named test with a table named carousel looks like:
----------------------------------------------
| title | image | link |
----------------------------------------------
| demo | demo.png |images/demo.png |
----------------------------------------------
I tried calling it but nothing works. I'm new to php.
My Code:
<?php
$link = mysqli_connect("localhost", "root", "", "test");
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT * FROM news";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<div class=\"container\">";
echo "<div id=\"myCarousel\"class=\"carousel slide\"data-ride=\"carousel\">";
echo "<div class=\"carousel-inner\">";
echo "<div class=\"item active\">";
echo "<img alt=\"News\" src=\"images/{$row["image"]}\">";
echo "<p>{$row["title"]}</p>";
echo "<ul class=\"list-group col-sm-4\"href=\"{$row["link"]}\"echo "<b><h4>{$row["title"]}">;
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
echo "</div>"
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
?>
How can I do that?
You have to add while loop in your HTML file, try using this.
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<?php
error_reporting(E_ALL);
$query = "SELECT id, path, name FROM images";
$result = mysql_query($query);
$num = mysql_num_rows($result);
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "<img src=\"$row[path]\" title=\"$row[name]\" alt=\"\" />";
}
?>
</div>
</div>
</div>
How to loop the data? All image are displaying at one slide other slides are empty.
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php foreach($banner as $data) { ?>
<div class="item active">
<img src="<?php echo base_url()?>uploads/banner/<?php echo $data['image']?>" alt="Chania" width="460" height="345">
</div>
<?php }?>
<div class="item">
<img src="<?php echo base_url()?>assets/image/c.jpg" alt="Chania" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<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>
How to loop the data? All image are displaying at one slide other slides are empty.
Use the below code.
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$i = 0;
foreach($banner as $data) { ?>
<div class="item <?php echo $i==0 ? 'active' : ''; $i++; ?>">
<img src="<?php echo base_url()?>uploads/banner/<?php echo $data['image']?>" alt="Chania" width="460" height="345">
</div>
<?php }?>
</div>
I want to create a carousel. This is my code:
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/images/m1.jpg" alt="Poza 1" width="460" height="345">
</div>
<div class="item">
<img src="/images/m2.jpg" alt="Poza 2" width="460" height="345">
</div>
<div class="item">
<img src="/images/m3.jpg" alt="Poza 3" width="460" height="345">
</div>
<div class="item">
<img src="/images/m3.jpg" alt="Poza 3" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
I have all the pictures in the folder images...but they don't appear. So when I go in the images folder and I want to see the pictures, appear this:
Warning:
require_once(/home/files/public_html/6/skins/shinra/google_view.template.php) [function.require-once]: failed to open stream: No such file or
directory in /home/files/public_html/6/skins/shinra/view1.template.php
on line 19
Does anyone have an idea on whats going on and how I can fix it?