使用 codeigniter 根据选定的 id 显示图像

Question

如何根据选择的 id 显示图像。在添加投资组合图像时，我将数据插入到两个表中，即投资组合表和投资组合标签表。

我有三个表投资组合、标签和投资组合标签。

portfolio
=============
portfolio_id        image_path 
1                   image.png           
2                   imag.png           
3                   images.png            
4                   img.png            
5                   imagess.png 

Tags table:
==========
tag_id     tag_name
 1       All
 2       CMS
 3       DESIGN

 portfolio_tag
 =============
 portfolio_id        tag_id  portfolio_tag_id
 1                   1            1
 1                   2            2
 2                   3            3
 3                   1            4

我将获取所有标签数据以及投资组合数据。打开页面时，它将显示与所有标签相关的所有数据。但是当我们选择特定时，仅显示与该标签相关的信息。 例如：如果我选择 CMS，它应该只显示与 CMS 相关的信息，如果我选择 DESIGN，则应该只显示与该标签相关的信息。

谁能建议我如何做到这一点。

这是我的代码。

控制器：

public function index()
{
    $this->load->model('portfolio_model');
    $data["records2"] = $this->portfolio_model->get_portfolio();
    $data["records3"] = $this->portfolio_model->get_tags();
    $data['mainpage'] = "portfolio";
    $this->load->view('templates/template',$data);
 }

型号：

function get_portfolio($limit, $start)
{
    $this->db->limit($limit, $start);
    $this->db->Select('portfolio.*');
    $this->db->From('portfolio');
    $this->db->where(array('portfolio.status'=>1));
    $q=$this->db->get();
    if($q->num_rows()>0)      
    {       
        return $q->result();
     }
        else
        {
    return false;
  }
}
function get_tags()
{
    $this->db->Select('tags.*');
    $this->db->From('tags');
    $q=$this->db->get();
    if($q->num_rows()>0)      
    {       
        return $q->result();
    }
    else
    {
        return false;
    }
}

查看：

<?php  $this->load->view('tagss');?>
                    <?php 
                    $cnt = 0;
                    if(isset($records2) && is_array($records2)):?>
                    <?php foreach ($records2 as $r):?>  
                    <div class="portfolioimages">                   
                      <a href="<?php echo $r->website_url;?>" target="_blank"><img src="<?php echo base_url();?>admin/images/portfolio/thumbs/<?php echo $r->image_path;?>" /></a>
                    </div>
                    <?php 

                    if(($cnt%3) == 0) { echo "<br>"; }          
                    $cnt++; 
                    endforeach; endif;?>

标签

<?php if(isset($records3) && is_array($records3)):?>
    <?php foreach ($records3 as $r):?> 
        <div class="materials">         
            <div class="class453">
                <a href="#"  class="read_more12"><?php echo $r->tag_name;?></a>
            </div>
        </div>
<?php endforeach ;endif;?>  
<script type="text/javascript">
$('.materials a').not('.materials a:first').addClass('opacty');
$('.materials a').click(function(e){
$('.materials a').not(this).addClass('opacty');
$(this).removeClass('opacty'); 
});
</script>

Answer 1

为了在点击不同的标签名时显示过滤后的图像，我们可以使用 ajax。因此，首先我们需要在 Controller 类中创建一个新函数，它将 tag_id 的获取图像 url 显示为 json 对象。

将以下功能添加到您的控制器中。

public function tag_data($id){
    $this->load->model('portfolio_model');
    $data = array();
    $tagged_result = $this->portfolio_model->get_tag_images($id); // call to model function
    $tagged_images = array();

    foreach($tagged_result as $tag){
        $tagged_images[] = $tag->image_path;
    }
    echo json_encode($tagged_images);
}

在上面的代码中，我调用了函数get_tag_images($id)，它从数据库中获取与tag_id 相关的所有图像url。

将以下代码附加到模型类中

public function get_tag_images($id){
    $query = $this->db->select('image_path')->from('portfolio_tag')->join('portfolio',"portfolio_tag.portfolio_id = portfolio.portfolio_id")->where("tag_id", $id)->group_by('portfolio.portfolio_id')->get();
    if($query->num_rows() > 0)     
        return $query->result();
    else
        return false;
}

现在我们必须在标签视图中进行一些更改。

查看：

<?php 
$cnt = 0;
if(isset($records2) && is_array($records2)):?>
    <div id="portfolio">
        <?php foreach ($records2 as $r):?>  
            <div class="portfolioimages">                   
              <a href="<?php echo $r->website_url;?>" target="_blank"><img src="<?php echo base_url();?>admin/images/portfolio/thumbs/<?php echo $r->image_path;?>" /></a>
            </div>
            <?php 

            if(($cnt%3) == 0) { echo "<br>"; }          
            $cnt++; 
        endforeach; ?> 
    </div>
<?php endif;?>

编辑标签视图：

<?php if(isset($records3) && is_array($records3)):?>
    <?php foreach ($records3 as $r):?> 
        <div class="materials">         
            <div class="class453">
                <a href="javascript:void(0)"  class="read_more12">
                    <span style="display:none"><?php echo $r->tag_id; ?></span> // this contains the tag_id
                    <?php echo $r->tag_name;?>
                </a> 
            </div>
        </div>
<?php endforeach ;endif;?>  

阿贾克斯 -

<script type="text/javascript">

    $('.materials div a').click(function(e){
        e.preventDefault();
        var tagId = $(this).find('span').html();
        var url   = '<?php echo base_url('portfolio/tag_data/'); ?>'+ tagId;
        var $this = $(this);
        $.ajax({
          type: 'POST',
          url:  url,
          data: {'tagid': tagId},
          success: function(data){
            var taggedImgs = $.parseJSON(data);
            var inc = 0;
            var unTag = [];
            var portfolioImages =  $('.portfolioimages a img').map(function(){
                    var url = $(this).attr('src').split('/');
                    return url[url.length-1];
                });

            $('.portfolioimages a img').each(function(e){
                    imgUrl      = $(this).attr('src').split('/');
                    var imgPath = imgUrl[imgUrl.length-1];
                    // compare the tagged image with portfolio images url
                    if($.inArray(imgPath, taggedImgs) == -1){
                        // image doesn't matched
                        $(this).remove();
                    } 

                });
            jQuery.each(taggedImgs, function(idx, tagImg){
                var flag = false;
                if($.inArray(tagImg, portfolioImages) == -1){
                    // image doesn't exist
                    $('#portfolio').append("<div class='portfolioimages'><a href='<?php echo base_url('index.php/portfolio'); ?>' target='_blank'><img src='<?php echo base_url('admin/images/portfolio/thumbs/'); ?>/"+tagImg+"'></a></div>");
                }

            });

          },
          error: function(err){
            alert("Some error occured! "+ err);
          }
        })
    })
</script>