I'm working on a product display slider which displays product images from database
Now I am trying to use explode function to display one by one
problem is that all images a showing in one go rather then one by one
here is the code
<div class="col-md-9">
<div class="col-md-5 grid">
<div class="flexslider">
<?php $photos = explode(',',$products['image']);
foreach($photos as $photo):?>
<ul class="slides">
<li data-thumb="<?= $photo; ?>">
<div class="thumb-image"> <img src="<?= $photo; ?>" data-imagezoom="true" class="img-responsive"> </div>
</li>
</ul>
<?php endforeach; ?>
</div>
</div>
Related
I have two tables one having advert info which includes id for images table associated with the advert. I am showing the advert information in one single page, how do I send both arrays to the view page. If I write the select for both tables, I get multiple lines since I have multiple images for an advert.
My model functions
public function get_adverts()
{
//$this->db->select();
//$this->db->from('adverts');
$db_query='select adverts.id,adverts.address,adverts.title,adverts.item_condition, adverts.add_type, adverts.price, adverts.negotiable, adverts.product_description, countries.country_name,states.state_name, cities.city_name, product_pictures.picture_file_name
FROM adverts,countries,cities,states, product_pictures
WHERE adverts.country_id=countries.id and adverts.city_id=states.id and adverts.area=cities.id and adverts.id= product_pictures.add_id';
$query = $this->db->query($db_query);
return $query->result();
}
public function get_pictures()
{
//$this->db->select();
//$this->db->from('adverts');
$db_query='select product_pictures.picture_file_name
FROM adverts,product_pictures
WHERE adverts.id=product_pictures.add_id';
$query = $this->db->query($db_query);
return $query->result();
}
and my control
public function get_products()
{
// gets all dvertes in the system
$this->load->model('Product_model');
$data['products']=$this->Product_model->get_adverts(); // get database query output to the array
$data['images']=$this->Product_model->get_pictures();
$array_info2 = array(
"title" => "Not Found"
);
$this->load->view('include/header', $array_info2);
$this->load->view('include/navbar_logged_in');
$this->load->view('Site/view_adverts',$data);
$this->load->view('include/footer');
}
This lists all images under one advert, my view portion given below:
<div class="container">
<?php foreach($products as $product):?>
<div class="ad-listing-list mt-20">
<div class="row p-lg-3 p-sm-5 p-4">
<div class="col-lg-4 align-self-center">
<?php foreach($images as $image):?>
<img class="image img-thumbnail" src="<?php echo base_url('/uploads/advert_images/thumbs/'.$image->picture_file_name);?>" >
<?php endforeach;?>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6 col-md-10">
<div class="ad-listing-content">
<div>
<?php echo $product->id." ".$product->title;?>
</div>
<ul class="list-inline mt-2 mb-3">
<li class="list-inline-item"> <i class="fa fa-folder-open-o"></i> Electronics</li>
<li class="list-inline-item"><i class="fa fa-calendar"></i>26th December</li>
</ul>
<p class="pr-5"><?php echo $product->product_description;?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
I'm trying to create 3 columns with bootstrap and Wordpress. I want my category posts to be in 3 columns. But instead of 3 columns, when I view the category page, they're in one column, stacked on top of each other. What am I doing wrong? This is my archive.php template
<?php if(have_posts() ): while(have_posts()): the_post();?>
<div class="container">
<div class="row">
<div class="col-md-4 post-card">
<?php if(has_post_thumbnail()):?>
<a href="<?php the_permalink();?>"><img src="<?php the_post_thumbnail_url('blog-small');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail">
<?php endif;?>
<a href="<?php the_permalink();?>"><h2 class="h2 text-center mb-3"><?php the_title();?></h2>
Read more
</div>
</div> </div>
<html>
<div class="product-tile ">
<div class="product-image">
<img src="1.jpg">
<img src="2.jpg">
</div>
<div class="brand">
<a href="example1.html" class="brand-link">
Example1
</a>
</div>
<div class="product-name">
Craquelé-Effect Leather Square-Toe Mules
</div>
</div>
<div class="product-tile ">
<div class="product-image">
<img src="11.jpg">
<img src="12.jpg">
</div>
<div class="brand">
<a href="example2.html" class="brand-link">
Example2
</a>
</div>
<div class="product-name">
Craquelé-Effect
</div>
</div>
</html>
My content is like this in HTML and want to copy it on my website.
My code is like how to get the title, images, brand and there price. I've used file_get_html in it but I'm getting issue in fetching the datalike brand and price.
require('simple_html_dom.php');
$html = file_get_html('new_arrival.html');
//$product = [];
foreach ($html->find('div.wrap-desc') as $pro) {
$proDetails = $pro->find('div.brand');
}
If you are using jQuery you can get the contents of a DOM element using .html():
$('html').html()
Alternatively in vanillaJS:
let x = document.getElementByTagName('html')
console.log(x.innerHTML)
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
I have a horizontal carousel that is working fine, here is the code for it
Now i wish to fetch the data from database and display it that corousel. Following is the code that i used
<div class='row'>
<div class='col-xs-12'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach($student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
but the view is distorted and instead of all the slides sliding in one row, the view is coming like this
That's because unless the row is active, the other .item row gets the property display:none; If you were to remove the display:none; it should work as you want.
Create the class="row" inside the loop. Also keep in mind that the screen consists of 12 units only, so if you create a row of more than 12 units it will go to next line automatically. As you have created the loop that creates "col-md-3" for more than 4 times which sums more than 12, so it moves to next line.
For reference view this
As you have not given the php code, i am giving u sample of it
The array that you are getting divide it into a group of 4 (or as many as you want) like given below
$query = $this->db->get('student');
$r = $query->result();
$s = (array_chunk($r, 4));
return $s;
And then on the code you have given, change into following
<div class="carousel-inner">
<?php foreach($s as $key => $per_student): ?>
<?php if($key=='0'): ?>
<div class="item active">
<?php else: ?>
<div class="item ">
<?php endif; ?>
<div class="row">
<?php foreach($per_student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
I am doing a project in codeigniter 3.3(latest version). Is there any method/function that is related to skip while inside the foreach? For example, I have 5 data in my table(ofcourse you need to use foreach in view to get all the data). The 3 images will be display on the top part and the last 2 will be display in the bottom part, is it possible
View
<div class="container-fluid proj-bottom">
<div class="row">
<?php foreach($getContent as $content){ if($content->id=="1"){ skip();}?>
<div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn">
<?=$content->id?>
<a href="#fly" data-toggle="modal" data-animation="animated zoomInRight" ><img src="<?= base_url() .'uploaded/'. $content->img_path?>" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3>Fly</h3>
<span>View</span>
</a>
</div>
<?php } ?>
</div>
</div>
You can use continue:
<div class="container-fluid proj-bottom">
<div class="row">
<?php foreach($getContent as $content){ if($content->id=="1"){ skip();}?>
<div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn">
<?=$content->id?>
<a href="#fly" data-toggle="modal" data-animation="animated zoomInRight" ><img src="<?= base_url() .'uploaded/'. $content->img_path?>" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3>Fly</h3>
<span>View</span>
</a>
</div>
<?php } ?>
</div>
</div>
The continue (Manual reference) will skip the current loop and go for the next record if it exists.
The break (Manual reference) will skip and quit the loop.