使用 codeigniter 创建图库时出错

Question

我已经粘贴了一些我的数据库的两个屏幕截图，以及我希望我的网页看起来如何。我试图完成这项工作，但没有得到解决问题的方法 我已将所有图像存储在文件夹中，并将图像路径存储在数据库中，现在我想以这样一种方式获取图像，即当我单击所有作品时，它应该显示所有图像，但是当我单击创意或摄影或网络时像这样的开发，那么它应该只显示那些与其类相关的图像，这些图像存储在数据库中，类型为列。或者，例如，如果我点击说创意，那么它应该像这样显示第 2、第 3、第 5 和第 8。我真的不知道如何做到这一点。请问我真的需要帮助

            //-----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><a href="#"><?php echo $row->first_content; ?></a></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

请尝试以下解决方案。

您错过了在 apps 和 joomla

等 div 中添加的动态类

<div class="portfolio-item apps joomla col-xs-12 col-sm-4 col-md-3">

在上面的行中添加了您现有代码的类

<?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">

希望这项工作！

Answer 2

您已包含 jquery.isotope.min.js 库，您需要遵循以下文档

https://isotope.metafizzy.co/

$grid.isotope({ filter: '.transition' }) 

也改成下面的视图代码

<div class="portfolio-item <?php echo $gettypes;?> col-xs-12 col-sm-4 col-md-3">