动态旋转木马codeigniter

时间:2017-11-05 14:10:51

标签: twitter-bootstrap-3 carousel

我正在制作内容管理系统。我可以为我的网站上传新内容,但在将图像显示给我的轮播时遇到问题。我上传的所有图片都是垂直的。

例如:我上传了3张图片,就像这样

Image 1
Image 2
Image 3

预期产出:

<- Image 1 -> <- Image 2 -> <- Image 3 ->

问题:如何将所有上传图片放入我的旋转木马?

查看

<div class="container" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px;">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width: 85.5%;">
     <!-- Indicators -->
    <ol class="carousel-indicators">
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
       <li data-target="#myCarousel" data-slide-to="1"></li>
       <li data-target="#myCarousel" data-slide-to="2"></li>
       <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <?php foreach($content as $row):?>
        <div class="item active">
            <center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center>
        </div>
        <?php endforeach;?>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
  </div>
</div>

3 个答案:

答案 0 :(得分:1)

<?php foreach($content as $row):?>
    <div class="item active">
    // ...

这意味着您的每个轮播项目都有active类。 As the docs describe,其中只有一个应该处于活动状态,而这将是首先显示的那个。

答案 1 :(得分:0)

要像@Dont Panic那样制作动态旋转木马,您只需为所有商品选择一个有效的

<!-- Indicators --> 
<?php $count = 0; 
      $indicators = ''; 
         foreach ($content as $row): 
         $count++; 
           if ($count === 1) 
           { 
              $class = 'active'; 
           }  
           else 
           { 
              $class = ''; 
           }?> 

             <div class="item <?php echo $class; ?>"> 
                <center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center> 
             </div> 

             $indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>';
             <?php endforeach;?> 

而@Dont Panic制作了一个动态指标(指标是小圆圈)就是这个。

 $indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br> 

我遇到了一个小问题,如果我只想显示所有有效图片/内容和我的指示器该怎么办?

在@Don Panic的代码中,即使其他图像处于非活动状态,它仍会显示所有图像。

示例:

I have  6 images,
4 images are active
2 images are inactive/deactivate

情景:

 In my indicator it displayed 6 even though the active are only 4.

所以我把他的代码改进了这个

<div class="carousel-inner" role="listbox">
      <?php $count = 0; 
        $indicators = ''; 
        foreach ($content as $row): 
        $count++; 
        if ($count === 1) 
        { 
            $class = 'active'; 
        } 
        else 
        { 
            $class = ''; 
        }?> 
        <?php  if($row->status == 'Active'):
            $indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br> 
            <div class="item <?php echo $class; ?>"> 
                <center><img src="<?= base_url().'uploads/'.$row->content_image?>" width="100%" alt="Menu"></center> 
            </div>
        <?php endif;?>
        <?php endforeach;?> 
        <ol class="carousel-indicators"> 
            <?= $indicators; ?> 
        </ol>
    </div>

现在它只显示了4张图像和指示符。

答案 2 :(得分:0)

enter image description here如果您在页面(或)视图中列出图像,下面的代码可能对您有所帮助,现在您希望弹出图像,并且在弹出窗口中您需要旋转木马,就像我上传的图像一样。enter image description here

note: that you have also fetched the no. of images i.e count by using num_row();
note: in header you have added these cdn

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><!--BS CSS CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!--CDN FOR JQUERY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><!--CDN FOR AJAX-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><!--BOOTSTRAP CDN-->


#model(gallery_m)



    //FUNCTION TO COUNT THE NO. OF ROWS/IMAGES IN A DATABASE
    public function count()
    {
        $this->db->select('*');
        $q=$this->db->get('images');

        if($q)PART ELSE IT WILL JUMP TO THE ELSE PART
        {
            return $q->num_rows();ADMIN/GALLERY()
        }
        else
        {
            return false;
        }
    }


    //FUNCTION TO GET IMAGES FROM DATABASE
    public function gallery()
    {
        $this->db->select('*');
        $q= $this->db->get('images');


        if($q->num_rows()>0)
        {
            return $q->result();
        }
        else
        {
            return false;
        }
    }

#controller(Admin)



public function gallery()
    {
        $this->load->model('gallery_m');
        $data['images']= $this->gallery_m->gallery();
        $data['count']= $this->gallery_m->count();

        if($data['images'])
        {
            $this->load->view('gallery', $data);
        }
    }

#view(gallery)

          <!--begin modal window-->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog modal-lg"><!--MODEL-LG IS USED FOR BIGGER MODEL-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="pull-left">Gallery</div><!--HEADER TITLE-->
                            <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button><!--USING THE REMOVE MODEL ICON-->
                        </div>
                        <div class="modal-body">

                        <!--CAROUSEL CODE GOES HERE-->
                        <!--begin carousel-->
                            <div id="myGallery" class="carousel slide" data-ride="carousel">

                            <div class="carousel-inner">

                            <?php for($i=1; $i <= $count; $i++):?><!--USING FORLOOP TO MAKE THE FIRST ITEM ACTIVE WHEN CONDITION $==1 IS SATISFIED-->

                            <?php if($i==1) 
                            {
                            ?>
                                <div class="carousel-item active"><img src="<?= $image->image ?>" alt="images" style="height: 800px; width:916px">
                                </div>
                            <?php
                            }
                            else
                            {
                            ?>
                                <?php foreach($images as $image):?><!--USE OF SECOND FOREACH TO DISPLAY IMAGES THAT WE FERCHED FROM DATABASE-->
                                <div class="carousel-item"> <img src="<?= $image->image ?>" alt="images" style="height: 600px; width:916px">
                                </div>
                                <?php endforeach;?><!--END OF SECOND FOREACH LOOP-->
                            <?php
                            }
                            ?>

                            <?php endfor;?><!--END OF FORLOOP-->

                            <!--end carousel-inner--></div>
                                <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#myGallery" data-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </a>
                            <a class="carousel-control-next" href="#myGallery" data-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </a>
                            </div><!--end carousel-->
                        </div> <!--end modal-body-->
                            <div class="modal-footer">
                                <div class="pull-left">
                                </div>
                                <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
                            </div><!--end modal-footer-->
                        </div><!--end modal-content-->
                </div><!--end modal-dialoge-->
            </div><!--end myModal-->



            <!-- Delete Button-->
            <button type="submit" class="btn btn-danger remove" id="<?= $image->id?>"> Delete</button>


            <!--Update anchor-tag-->
            <?=anchor("admin/edit/{$image->id}", 'Edit', ['class'=>'btn btn-primary']);?>
            <?php endforeach;?>