使用codeigniter顯示基於選定ID的圖像

Question

如何基於選擇ids顯示圖像。添加投資組合圖像時，我將數據作爲投資組合表和portfolio_tags表插入到兩個表中。

我有三個表組合，標籤和portfolio_tags。

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 

我將獲取所有的標籤數據以及投資組合data.While打開它會顯示所有相關的所有tags.But數據的頁面，當我們選擇特定的只涉及到該標籤上的信息被顯示。 例如：如果我選擇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

爲了在單擊不同tagNames時顯示過濾圖像，我們可以使用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); 
} 

在上面的代碼，我叫其獲取來自這都涉及到TAG_ID數據庫中的所有圖像URL的功能get_tag_images($id)。

下面附加的模型類

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>