error in creating gallery using codeigniter - php

Question

i have pasted some two screen shoots of my database and how actually i want my web page to look. im trying to get this done but not getting how to solve the issue
i have stored all the images in folder and also the image path in the database, now i want to fetch the image in such a way that when i click the all works it should display all the images but when i click creative or photography or web development like this then it should show only those images which are related to their classes stored in database with type as column. alternatively for example if i click say creative then it should display 2nd, 3rd, 5th and 8th like this.i really don have any idea how to do this. please i really need help
//-----controller------
public function portfolio()
{
$this->load->helper('url');
$this->load->view('header');
$data['results'] = $this->Contact_model->getAllRecords3();
$this->load->view('portfolio',$data);
$this->load->view('footer');
}
//--------model-----
function getAllRecords3()
{
return $this->db->get('portfolio1')->result();
}
//-------view---------
<section id="portfolio">
<div class="container">
<div class="center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt</p>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default active" href="#" data-filter="*">All Works</a></li>
<li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Photography</a></li>
<li><a class="btn btn-default" href="#" data-filter=".wordpress">Web Development</a></li>
</ul>
<!--/#portfolio-filter-->
</div>
<div class="container">
<div class="">
<div class="portfolio-items">
<?php
if( !empty($results) ) {
foreach($results as $row) {?>
<div class="portfolio-item apps joomla col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="<?php echo base_url('uploads/'.$row->filename);?>" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><?php echo $row->first_content; ?></h3>
<p><?php echo $row->second_content; ?></p>
<a class="preview" href="<?php echo base_url('uploads/'.$row->filename);?>" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<?php
} ?>
<?php }
?>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url(); ?>js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url(); ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.prettyPhoto.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.isotope.min.js"></script>
<script src="<?php echo base_url(); ?>js/wow.min.js"></script>
<script src="<?php echo base_url(); ?>js/functions.js"></script>

Answer 1

Please try below solution.
You have missed dynamic classes adding in div like apps and joomla
<div class="portfolio-item apps joomla col-xs-12 col-sm-4 col-md-3">
added class in above line with your existing code
<?php
foreach($results as $row) {
//code for getting dynamic class names from db
$class = explode(",.", $row->type);
$gettypes = implode(" ", $class);
?>
<div class="portfolio-item <?php echo $gettypes;?> col-xs-12 col-sm-4 col-md-3">
Hope this work!

Answer 2

U have included jquery.isotope.min.js library u need to follow following documentation
https://isotope.metafizzy.co/
$grid.isotope({ filter: '.transition' })
also change to following view code
<div class="portfolio-item <?php echo $gettypes;?> col-xs-12 col-sm-4 col-md-3">