I'm trying to make the carousel slide image slide by 4 images per slide. I want each slide to display four images, and then the next slide will display another four images. I hope I have explained well.
<?php
$i = 0;
foreach ($photos as $photo) {
if ($i == 0) {
?>
<div class="carousel-item active">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<i class="tag"></i>
<a href="#">
<img src="<?php echo $photo->image_path(); ?>" width="125" height="125" class="img-thumbnail" alt="buy more"/>
</a>
</div>
</li>
</ul>
</div>
<?php
$i++;
} else {
if ($i != 0) {
?>
<div class="carousel-item">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<i class="tag"></i>
<a href="#">
<img src="<?php echo $photo->image_path(); ?>" width="125" height="125" class="img-thumbnail" alt="buy more"/>
</a>
</div>
</li>
</ul>
</div>
<?php
}
$i++;
}
}
?>
I believe that will do the trick:
<?php
$numImagesPerSlide = 4;
foreach($photos as $k => $photo){
?>
<div class="carousel-item <?php echo ($k % $numImagesPerSlide == 0) ? 'active': '';?>">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<i class="tag"></i>
<img src="<?php echo $photo->image_path(); ?>" width="125" height="125" class="img-thumbnail" alt="buy more"/>
</div>
</li>
</ul>
</div>
<?php
}
?>
The point is to use $k, whenever it is divisible by 4 (4, 8, 12, 16, ...), with the function $k % $numImagesPerSlide == 0 then you print the code you need.
I guess you will need an extra code, like
if ($k % $numImagesPerSlide == 0) {
//print the header of the carrousel
}
Related
How can I dynamic below html in foreach loop? I've an images array I can echo one image per loop but I'm not sure how can I loop two images per loop?
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<img src="1" class="img-fluid">
<img src="2" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="3" class="img-fluid">
<img src="4" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="5" class="img-fluid">
<img src="6" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="7" class="img-fluid">
<img src="8" class="img-fluid">
</div>
</div>
This what I tried.
<?php $images = get_field('image_gallery'); ?>
<?php if($images): ?>
<div class="d-flex flex-row">
<?php foreach( $images as $image ): ?>
<div class="d-flex flex-column">
<a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?> " class='img-fluid' alt="">
</a>
<!-- This duplicates the image and need some break or continue statment -->
<a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?>" class='img-fluid' alt="">
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Use the following code. May be it help you
<?php $images = get_field('image_gallery'); ?>
<?php if($images): ?>
<div class="d-flex flex-row">
<?php for ($i=0; $i < count($images); $i++) { ?>
<div class="d-flex flex-column">
<a data-fancybox="gallery" href="<?php echo $image[$i]['url']; ?>">
<img src="<?php echo $image[$i]['url']; ?> " class='img-fluid' alt="">
</a>
<!-- This duplicates the image and need some break or continue statment -->
<a data-fancybox="gallery" href="<?php echo $image[$i+1]['url']; ?>">
<img src="<?php echo $image[$i+1]['url']; ?>" class='img-fluid' alt="">
</a>
</div>
<?php
$i++;
}
?>
</div>
<?php endif; ?>
You could use a for loop instead and iterate the loop every 2 images...
<?php $images = get_field('image_gallery'); ?>
<?php if($images): ?>
<div class="d-flex flex-row">
<?php for($i = 0; $i < count($images); $i+=2){ ?>
<?php $image = $images[i];?>
<div class="d-flex flex-column">
<a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?> " class='img-fluid' alt="">
</a>
<?php if (!empty($images[i+1])) { ?>
<?php $nextImage = $images[i+1];?>
<a data-fancybox="gallery" href="<?php echo $nextImage['url']; ?>">
<img src="<?php echo $nextImage['url']; ?>" class='img-fluid' alt="">
</a>
<?php } ?>
</div>
<?php } ?>
</div>
<?php endif; ?>
This question already has an answer here:
How do i fix this loop to display images from my database using bootstrap carousel
(1 answer)
Closed 3 years ago.
I want to display images using bootstrap carousel using foreach loop.
I have been having a difficult time trying to display images using foreach loop... Please note that my database functions are not the problem... I just need help to restructure the loop.
<?php
$message = "";
if(empty($_GET['id'])) {
$session->message("<div class='btn sm-warning'>please select an image.</div>");
redirect_to('list_properties.php');
}
$id = $_GET['id'];
$sql = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
$photos = Picture::find_by_sql($sql);
?>
Truth is i am so confused right now. I just want to restructure this loop using foreach...
<div id="carouselExampleIndicators" class="carousel slide mx-auto" data-ride="carousel">
<ol class="carousel-indicators">
<?php $i=0; foreach($photos as $photo){?>
<?php if($i==0){ ?><li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" class="active"><?php } ?>
<?php if($i % 2 == 0){ ?><li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>"><?php }?>
<?php if($i % 4 != 0){ ?></li><?php }?>
<?php $i++; } ?>
</li>
</ol>
<div class="carousel-inner">
<?php $i=0; foreach($photos as $photo){?>
<?php if($i==0){ ?><div class="carousel-item active"><?php } ?>
<?php if($i % 2 == 0){ ?><div class="carousel-item"><?php }?>
<div class="col-xs-3">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt=""/>
</div>
<?php if($i % 4 != 0){ ?></div><?php }?>
<?php $i++; } ?>
</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>
<?php
$message = "";
if(empty($_GET['id'])) {
$session->message("<div class='btn sm-warning'>please select an image.</div>");
redirect_to('list_properties.php');
}
$id = $_GET['id'];
$sql = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
$photos = Picture::find_by_sql($sql);
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$i = 0;
foreach($photos as $photo){
if($i == 0){
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" class="active"></li>
<?php
$i++; }else{
if($i != 0){
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" ></li>
<?php
} $i++;
}
}
?>
</ol>
<div class="carousel-inner">
<?php
$i = 0;
foreach($photos as $photo){
if($i == 0){
?>
<div class="carousel-item active">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
</div>
<?php
$i++; } else{
if($i != 0){
?>
<div class="carousel-item">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
</div>
<?php
} $i++;
}
}
?>
</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>
I tried using bootstrap carousel to display images from my database but something seem to be wrong with my loop...
<?php
$message = "";
if(empty($_GET['id'])) {
$session->message("<div class='btn sm-warning'>please select an image.</div>");
redirect_to('list_properties.php');
}
$id = $_GET['id'];
$sql = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
$photos = Picture::find_by_sql($sql);
?>
The fetch is all correct from the database but the loop displaying the images in the slide displays one image and the slide loops between the first and second slide only.
<div class="container">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide mx-auto" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$i=0;
if(count($photos)){
foreach ($photos as $photo) {
if($i==0){
echo '<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>';
$i++;
}
else
{
echo '<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>';
$i++;
}
}
}
?>
</ol>
<div class="carousel-inner">
<?php
$a=0;
if(count($photos)){
foreach ($photos as $photo) {
if($a==0){
?>
<div class="carousel-item active">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" alt="<?php echo $photo->title; ?>"/>
<?php
$a++;
}else
?>
</div>
<?php
{
?>
<div class="carousel-item">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" alt="<?php echo $photo->title; ?>"/>
<?php
$a++;
}
?>
</div>
<?php
}
}
?>
</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>
</div>
</div>
<?php
$message = "";
if(empty($_GET['id'])) {
$session->message("<div class='btn sm-warning'>please select an image.</div>");
redirect_to('list_properties.php');
}
$id = $_GET['id'];
$sql = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
$photos = Picture::find_by_sql($sql);
?>
.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$i = 0;
foreach($photos as $photo){
if($i == 0){
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" class="active"></li>
<?php
$i++; }else{
if($i != 0){
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" ></li>
<?php
} $i++;
}
}
?>
</ol>
<div class="carousel-inner">
<?php
$i = 0;
foreach($photos as $photo){
if($i == 0){
?>
<div class="carousel-item active">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
</div>
<?php
$i++; } else{
if($i != 0){
?>
<div class="carousel-item">
<img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
</div>
<?php
} $i++;
}
}
?>
</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>
The below html just shows the images one by one down the page and not in a slideshow. I've put the images in the database giving each one their own column. Is this wrong? How can I make the images be a slideshow. Thanks for helping.
<div id="lodgeGallery" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#lodgeGalleryl" data-slide-to="0" class="active"></li>
<li data-target="#lodgeGalleryl" data-slide-to="1"></li>
<li data-target="#lodgeGalleryl" data-slide-to="2"></li>
<li data-target="#lodgeGalleryl" data-slide-to="3"></li>
<li data-target="#lodgeGalleryl" data-slide-to="4"></li>
<li data-target="#lodgeGalleryl" data-slide-to="5"></li>
<li data-target="#lodgeGalleryl" data-slide-to="6"></li>
<li data-target="#lodgeGalleryl" data-slide-to="7"></li>
<li data-target="#lodgeGalleryl" data-slide-to="8"></li>
<li data-target="#lodgeGalleryl" data-slide-to="9"></li>
<li data-target="#lodgeGalleryl" data-slide-to="10"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<?php
//<img src="img/img1.jpg" alt="">
echo "<img src='img/$galleryImg1'";
?>
</div>
<div class="item">
<?php
//<img src="img/img2.JPG" alt="">
echo "<img src='img/$galleryImg2'";
?>
</div>
<div class="item">
<?php
//<img src="img/img3.png" alt="">
echo "<img src='img/$galleryImg3'";
?>
</div>
<div class="item">
<?php
//<img src="img/img4.png" alt="">
echo "<img src='img/$galleryImg4'";
?>
</div>
<div class="item">
<?php
//<img src="img/img5.jpg" alt="">
echo "<img src='img/$galleryImg5' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img6.jpg" alt="">
echo "<img src='img/$galleryImg6' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img7.jpg" alt="">
echo "<img src='img/$galleryImg7' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img8.jpg" alt="">
echo "<img src='img/$galleryImg8'";
?>
</div>
<div class="item">
<?php
//<img src="img/img9.jpg" alt="">
echo "<img src='img/$galleryImg9' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img10.JPG" alt="">
echo "<img src='img/$galleryImg10' ";
?>
</div>
<div class="item">
<?php
//<img src="img/img11.jpg" alt="">
echo "<img src='img/$galleryImg11' ";
?>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#lodgeGallery" 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="#lodgeGallery" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Seeing your code, i think you have ne error in the syntax of how you echo the image from server.
It should be
"<img src ='img/'.$galleryImg1.'"
For pulling the images from a database:
2 columns: RowID & ImageURL
select RowID, Image URL from db
$sql = ("SELECT RowID,ImageURL FROM db.dbo.table");
$res = odbc_exec($dbConn,$sql);
while ($images = odbc_fetch_array($res)){
echo "<img src="img/".$images."'/>";
}
Can anybody help with the below please. Im having a bit of difficulty getting my head around how to get it to work.
The code is for a thumbnail carousel.
Here is the HTML
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--thumbnails-->
<div class="row hidden-xs" id="slider-thumbs">
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six">
</a>
</li>
</ul>
</div>
The above code works fine, however I am trying to integrate the below PHP code so that the slider has dynamic images with thumbnails.
Here is the PHP code to display the images:
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
If anyone could help or point me in the right direction, it would be appreciated!
Try this. Note where code starts and ends i didn't copy all of your block:
<div class="carousel-inner">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $key => $image) {
$active = $key == 0 ? 'active' : '';
echo '<div class="<?php echo $active;?> item" data-slide-number="<?php echo $key; ?>">';
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
echo '</div>'; }
}
?>
</div>
Explanation. Showing the images is not only to print img src=..., so you have to see what html block to put in the foreach loop so it be showed as the html you posted. $key is the index that you need to mark the slides. $active shows which slide is active, so you need to set it only ones (in our case when $key is 0)
Cheers.