Dynamic Bootstrap Carousel

[Ventech_IT]

I am trying to make my bootstrap carousel dynamic in codeiginter here is what i have so far

Model Fucntion

        function get_all_images(){
            $query = $this->db->query("SELECT *  FROM property AS p INNER JOIN property_images AS pi ON p.ID = pi.image_id
                      GROUP BY p.ID  ORDER BY p.ID");
            return $query->result_array();
        }

My Controller:

        public function view($id)
        {
            $query = $this->Property_m->get_all_images();
            $res = $this->db->query($query);
            $count = mysqli_num_rows($res);
            $indicators = '';
            $slides = '';
            $counter = 0;
            while($row=mysqli_fetch_array($res)) {
                $image = $row['image_name'];
                $title = $row['property_name'];
                {
                    if ($counter == 0) {
                        $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '" class="active"></li>;';
                        $slides .= '<div class="item-active"><img src="<?php echo base_url()?>data/images/property_images/' . $image . '" alt="' . $title . '"/></div>';
                    } else {
                        $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '" class="active"></li>;';
                        $slides .= '<div class="item-active"><img src="<?php echo base_url()?>data/images/property_images/' . $image . '" alt="' . $title . '"/></div>';
                    }
                    $counter++;
                }
                    $data['prop'] = $this->Property_m->get_property($id);
                    $data['title'] = 'Properties';
                    $data['content'] = 'property_view';
                    $this->load->view('templates/default/template', $data);
                }
            }

and finally my view

     <div id="slider-property" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <?php echo $indicators; ?>
                                    </ol>
                                    <div class="carousel-inner">
                                        <?php echo $slides; ?>
                                    </div>
                                    <a class="left carousel-control" href="#slider-property" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#slider-property" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>

When i view this i get a content encoding error, could you please help me sort this out?

[mangel.murti]

• As i read your code , you need to check your view function. i just modify function for test purpose public function get_all_images(){

      $this->load->model('carsol');   
      $query = $this->carsol->get_all_images();
      $count = count($query);
      $indicators = '';
          $slides = '';
          $counter = 0;       
          foreach($query AS $key => $value){
                   $image = $query[$key]['theme_thumb'];
                   $title = $query[$key]['theme_title'];
  
                   if ($counter == 0) {
                      $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '" class="active"></li>';
                      $slides .= '<div class="item active"><img src="http://localhost/CI2.1.4/images/thumbnail/' . $image . '" alt="' . $title . '"/></div>';
                  } else {
                      $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '"></li>';
                      $slides .= '<div class="item"><img src="http://localhost/CI2.1.4/images/thumbnail/' . $image . '" alt="' . $title . '"/></div>';
                  }
                  $counter=$counter+1;
          } 
           $data['indicators'] = $indicators;
           $data['slides'] = $slides;
           $this->load->view('carsol', $data);    
  

  }

You can compare and see item-active => item active and class="active"

• I think your view part is ok , but i tested with below code so it's working nicely.

  <html>
  <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
  width: 70%;
  margin: auto;
  }
  </style>
  </head>
  <body>
  <div id="container">

     <div id="slider-property" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
        <?php echo $indicators; ?>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
         <?php echo $slides; ?>
   </div>
  
  <!-- Left and right controls -->
  <a class="left carousel-control" href="#slider-property" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#slider-property" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  

  </div>
  </div>
  </div>
  </body>
  </html>

In controller function item-active => item active , class active will only come if condition ==0. Hope this helps you

[mangel.murti]

You can see code here. Click Here