I am working on codeigniter and i want to show multiple images on each slider and images i am getting from database , i am able to show one image but how can i achieve this
front end code is this
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
</div>
</div>
</div>
</div>
As you told, that you'll receive data from database and it seems like an array, lets take it as next:
$urls = ['/assets/images/car.jpg',
'/assets/images/car2.jpg',
'/assets/images/car3.jpg',
'/assets/images/car4.jpg',
'/assets/images/car5.jpg',
'/assets/images/car6.jpg'
];
You can use foreach loop (or for loop, or while loop):
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<?php foreach($urls as $item): ?>
<img src="<?= base_url($item); ?>">
<?php endforeach; ?>
</div>
</div>
</div>
</div>
Here <?= equal to <?php echo.
Simplified Demo in PHP
This way will give you 6 images in a row. You can apply third-party plugin and get carousel with 2 rows.
If you want to separate them with hard-code you can define HTML as next:
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<div class="row">
<?php foreach($urls as $ind => $item): ?>
<?php if($ind % 3 == 0 && $ind != 0): ?>
</div><div class="row">
<?php endif; ?>
<img src="<?= base_url($item); ?>">
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
This way will give you 6 images in 2 rows.
If you're using carousel put next in the body of it:
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<div class="carousel">
<?php foreach($urls as $item): ?>
<div><img src="<?= base_url($item); ?>"></div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
$('.carousel').slick({
dots: true,
slidesPerRow: 3,
rows: 2,
responsive: [
{
breakpoint: 478,
settings: {
slidesPerRow: 1,
rows: 1,
}
}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css"/><script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="carousel">
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://d.newsweek.com/en/full/520858/supermoon-moon-smartphone-photo-picture.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://d.newsweek.com/en/full/520858/supermoon-moon-smartphone-photo-picture.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://d.newsweek.com/en/full/520858/supermoon-moon-smartphone-photo-picture.jpg" alt=""></div>
</div>
Related
I'm new into PHP. I googled this question but cannot get value still.
I have a PHP project where
<?php
foreach($categories as $key => $cat){
?>
<div class="container-fluid ">
<div class="row justify-content-around mt-5">
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img style="margin-bot: 100px;" class="card-img-top" src="imagenes/drinks3.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img class="card-img-top" src="imagenes/snacks.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img class="card-img-top" src="imagenes/postres1.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
</div>
</div>
I need to print each value once time to get a card with each category of $categories.
But im getting 9 cards with each category repeated 3 times.
I tried with index but it only get broken with offset 0.
Print the nested div you need to be unique in a loop:
<div class="container-fluid ">
<div class="row justify-content-around mt-5">
<?php
foreach($categories as $key => $cat){
?>
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img style="margin-bot: 100px;" class="card-img-top" src="imagenes/drinks3.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
<?php } ?>
</div>
</div>
<div id="products" class="row list-group">
<?php $counter = 1; foreach ($photo_products as $value) {
$product = new WC_Product( $value->ID ); ?>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="myImg" class="group list-group-image" src="<?php echo get_the_post_thumbnail_url($value->ID, array(324, 324)); ?>" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
<?php echo esc_attr($product->get_title()); ?></h4>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
<?php echo wc_price($product->get_price()); ?></p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success " href="<?php echo esc_attr($current_url).'/?add-to-cart='.esc_attr($value->ID); ?>">
<?php esc_html_e('Add to cart', 'woocommerce-photography-plugin'); ?>
</a>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img id="img01" class="modal-content" src="">
<div id="caption" class="modal-content">
<h4 class="group inner list-group-item-heading">
<?php echo esc_attr($product->get_title()); ?></h4>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead" >
<?php echo wc_price($product->get_price()); ?></p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success " href="<?php echo esc_attr($current_url).'/?add-to-cart='.esc_attr($value->ID); ?>">
<?php esc_html_e('Add to cart', 'woocommerce-photography-plugin'); ?>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $counter++; } ?>
</div>
Instead of
$product = new WC_Product( $value->ID );
You can try, following code:
$product = WC_Product::find()->where('id'=>$value->ID);
Good Day All,
I am trying to align items in a row of 3. At the top of each row there is a div called "". The purpose of this div is to open a new and after every 3 items the div must be close and another one opened. I have tried the below code to my suprise it is not working. This is very weird as the MOD operand should work. Cna any of you see what I could be doing wrong?
The write picture should look like this
It is out of alignment and the blue colour fills the whole page. I do not know what I am doing wrong:
$currentRow = 1;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
When I manually repeat the items every 3 items like below, it works perfectly:
<div class="top-box">
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/1st_Party_Boy.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">His First Party</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/Her_First_Party.jpg" height="300" width="320" alt=""/>
</div>
<div class="sale-box"><span class="on_sale title_shop">New</span></div>
<div class="price">
<div class="cart-left">
<p class="title">Her First of Many </p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/First_one_for_boys_and_girls.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">Their First Birthday</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="clear"></div>
</div>
Hey change $currentRow to zero
$currentRow = 0;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
When I try to view multiple data from database my static images are also showing multiple time. I try to use foreach and while with i++ but both time I get the same result.
How to view one image but multiple data.
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
foreach ($array as $arrays)
{
?>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
</div>
<?php } ?>
</div>
It's normal because your images are in the foreach.
Remove your first foreach
Make function like
foreach($array as $value){
echo $value;
}
and put them below your images.
example with your code : (but better make functions for all the foreach)
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
?>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
<h4><?php foreach ($array as $arrays)
{
echo $arrays['mobile_no'];
}?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
<h4>//same here</h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
<h4>//same here </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
<h4>//same here</h4>
</div>
</div>
</div>
</div>
Define the Image field outside the loop:
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
</div>
</div>
foreach ($array as $arrays)
{
?>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
</div>
<?php } ?>
</div>
Simplest put not the most beatiful solution is to just check if its your "header" line and adding those images at first run.. you can also add the if around your images instead of dublication to much. but you will get the idea
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
$i = 0;
foreach ($array as $arrays)
{
?>
if($i == 0){
//first line
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
}else{
<div class="col-sm-3">
<div class="address_item">
<h3>Address</h3>
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<h3>Mobile </h3>
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<h3>Phone</h3>
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<h3>Email</h3>
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
</div>
}
<?php } ?>
</div>
I have a loop which I want to take this behaver
first to add item div then loop into this div to add 6 items And after complete 6 items it will close this div and start again with next six items until finish
my current code like this :
<?php $x = 0; ?>
<?php foreach ($files as $lst) { ?>
<div class="item <?= ($x == 1 ? 'active' : ''); ?>">
<div class="row">
<div class="col-xs-2">
<a href="<?= base_url() ?>global/uploads/<?= $lst['FileName'] ?>"
rel="prettyPhoto[gallery1]">
<?php if ($lst['FileName'] != "" && file_exists(PUBPATH . "global/uploads/" . $lst['FileName'])) { ?>
<img src="<?= thumb($lst['FileName'], 150, 150); ?>" class="img-responsive">
<?php } else { ?>
<img src="<?= base_url() ?>global/site/data/1.jpg" class="img-responsive">
<?php } ?>
</a>
</div>
</div>
</div>
<?php $x++;
} ?>
but i want final structure to be like this
<div class="item active">
<div class="row">
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
</div>
</div>
You should clean the code a bit, instead of filtering inside the loop the array should contain the files and urls you want to enlist.
That would separate HTML from your PHP code making it much easier to read.
$files = [
'data/1.jpg', // can make an array as well, ['src'=>'data/1.jpg', 'href => 'link.com']
'data/2.jpg',
'data/3.jpg',
'data/4.jpg',
'data/5.jpg',
'data/6.jpg',
'data/7.jpg',
];
foreach(array_chunk($files, 6) as $row){
echo '<div class="item"><div class="row">';
foreach($row as $col){
echo '<div class="col-xs-2">';
echo '<img src="'.$col.'" class="img-responsive">';
//echo '<img src="'.$col['src'].'" class="img-responsive">';
echo '</div>';
}
echo '</div></div>';
}