我正在制作内容管理系统。我可以为我的网站上传新内容,但在将图像显示给我的轮播时遇到问题。我上传的所有图片都是垂直的。
例如:我上传了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>
答案 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;?>