Twitter Bootstrap 轮播用 PHP 制作动态答案

【问题标题】：Twiiter Bootstrap carousel making dynamic with PHPTwitter Bootstrap 轮播用 PHP 制作动态
【发布时间】：2012-09-01 03:24:48
【问题描述】：

我正在尝试制作一个使用 Twitter Bootstrap 默认 JavaScript 和 CSS 的轮播，但应该从 MySQL 数据库中获取图像。

我试图用 php 动态化的轮播 HTML 是这样的：

<div class="carousel-inner">
   <div class="active item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
   </div>
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我期待的 PHP 文件的最终结果是这样的

<div class="carousel-inner">
   <?php renderAds(); ?>
</div>

我写的PHP函数是这样的：

function renderAds(){
    $query = queryAds();
    $query_exe = mysql_query($query);

    if(mysql_num_rows($query_exe) == 0){
        echo '<img src="images/sampleAd.jpg" >';
    }else{

        $numb =1;
        $flag =1;
        while($fetched_data = mysql_fetch_array($query_exe)){

            if($numb == 1){
                if($flag == 1){
                    echo '<div class="active item">';
                }else{
                    echo '<div class="item">';
                }
            }elseif($numb == 4){
                echo '<a href="'.$fetched_data['url'].'"  class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
                echo '</div>';
                $numb =0;
            }else{
                echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }
            $numb++;
            $flag++;
        }


        echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>';
        echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>';
    }


}

在这里，与 twitter bootstrap 的默认轮播不同，我为每张幻灯片制作了 4 张图像，我希望每个幻灯片过渡包含 4 张图像，而不是默认情况下一张幻灯片的单个图像。在 HTML 中它可以工作，但是当我用我的 PHP 函数替换它时，第一张幻灯片可以工作，但是如果我在轮播中按下下一个箭头，整个 div 就会崩溃。

我怎样才能让它工作？

注意：这里 Last image 必须包含类 marginLast，并且其他应该有 marginTop 和 pull-left 类。

我期望在html中呈现的是这样的：

<div class="carousel-inner">

            <div class="active item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <div class="item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <div class="item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
   </div>

我怎样才能让我的 PHP 函数像上面那样显示结果标记？

编辑：我得到的输出是这样的：

<div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">

                <div class="active item">
                    <a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
                    <a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
                    <a href="sample.com"  class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
                </div>

                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>             
          </div><!-- end carousel-inner -->

  </div><!-- myCarousel -->

根据标记，这应该有效，但它没有，默认情况下，如果没有超过一个幻灯片，则箭头应该被禁用，但它是可点击的。

【问题讨论】：

问题似乎是您正在为 numb=1 创建
并仅为 numb!=1 创建。但是发布你的输出标记会有所帮助:)
我已经粘贴了输出，它似乎不起作用，但根据标记它应该可以工作，应该有四个项目只有三个在那里

标签： php mysql twitter-bootstrap carousel

【解决方案1】：

我把它解决了：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <?php $slider = $guest->getAllData("slider"); ?>
            <?php foreach( $slider as $slide) : ?>
                <li data-target="#myCarousel" data-slide-to="<?=$slide['id']; ?>" class=""></li>
            <?php endforeach; ?>
        </ol>
        <div class="carousel-inner">
            <?php foreach($slider as $slide) : ?>
                <div class="item ">
                    <img src="images/slider/<?=$slide['img']; ?>" alt="Los Angeles">
                </div>
            <?php endforeach; ?>
        </div>

        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

并添加JS代码：

$('.carousel-indicators>li:first-child').addClass('active');
$('.carousel-inner>div:first-child').addClass('active');

【讨论】：

【解决方案2】：

<div class="carousel-inner">

<?php 
// Twitter Bootstrap Carousel.
$caseStudies = get_posts(array(
  'numberposts' => 12,
  'post_type'   => 'case-study',
  'meta_key'    => 'show_case_study_home',
  'meta_value'  => 'yes',
  'post_status' => 'publish',
));

$open = 0;
$close = 1;
$active = 0;
$didClose = false;
foreach($caseStudies as $caseStudy){

  $image  = get_field('image_home', $caseStudy->ID);
  $header = get_field('header_home', $caseStudy->ID);
  $intro  = get_field('intro_home', $caseStudy->ID);

  $activeCss = "";

    if(($open)%4 == 0) {
      if ($active == 0) $activeCss = " active";
     echo '<div class="item'. $activeCss .'"><ul class="thumbnails">';
    }
?>

<li class="span3">
  <div class="case-study">
  <img src="<?php echo $image['url']; ?>" alt="">
  <a href="<?php echo get_permalink($caseStudy->ID); ?>" class="btn-more read-hover">Read More</a>
  <h4><?php echo $header; ?></h4>
  <p><?php echo $intro; ?></p>
  </div>
</li>

<?
    if(($close)%4 == 0) {
     echo "<ul></div>";
     $didClose = true; // Maybe the carousel has less than 4 items ...
    }

  $open++;
  $close++;
  $active++;
}
if($didClose == false) echo "</div></div>"; // If has less than 4 items in the carousel close the tags.
?>

</div><!--/.caroussel-inner -->

【讨论】：

【解决方案3】：

我想我已经为自己的问题找到了答案，尽管上述所有答案都给了我很多想法。谢谢大家

function renderAds(){
    $query = queryAds();
    $query_exe = mysql_query($query);
    if(mysql_num_rows($query_exe) == 0){
        echo '<img src="images/sampleAd.jpg" >';
    }else{
        $numb =1;
        $flag =1;
        echo '<div class="carousel-inner">';
        while($fetched_data = mysql_fetch_array($query_exe)){
            if($numb == 1){
                if($flag == 1){
                    echo '<div class="active item">';
                }else{
                    echo '<div class="item">';
                }
                echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }elseif($numb == 4){
                echo '<a target="_blank" href="http://'.$fetched_data['url'].'"  class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
                $numb = 0;
                echo '</div>';
            }else{
                echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }

            $numb++;
            $flag++;
        }

        if($numb > 1 && $numb < 4 ){
            echo '</div>';
            echo '</div>';
        }elseif($numb == 1){
            echo '</div>';
        }elseif($numb == 4){
            echo '</div>';
            echo '</div>';
        }

        echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>';
        echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>';
    }
}

【讨论】：

检查“elseif($numb == 4)”的原因是什么，这是您的应用程序特有的，还是专门用于 twitter 轮播的？

【解决方案4】：

你的 MySQL 查询是否只返回一个数组。这样一来，您的查询就可以重复使用（然后可以制成一个函数），并且您可以按照您认为合适的方式呈现数据。

<?php
$mysqli = new mysqli('localhost', 'username', 'password', 'database');

$sql = "SELECT * FROM table";
$res = $mysqli->query($sql);

$rows = array();
while ($row = $res->fetch_assoc()) {
    $rows[] = $row;
}
?>
<div class="carousel">
  <div class="carousel-inner">
<?php $i = 1; ?>
<?php foreach ($rows as $row): ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
    <div class="<?php echo $item_class; ?>">
      <a href="<?php echo $row['url']; ?>">
        <img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" />
      </a>
    </div>
<?php $i++; ?>
<?php endforeach; ?>
  </div>
</div>

您显然需要更改数据库查询，以及随后在foreach 循环中使用的值。我还使用了 mysqli 函数，因为现在不推荐使用 mysql 函数以支持 MySQLi（MySQL 改进）。

【讨论】：

我在这里投赞成票，因为不管工作与否，这是它应该编码的一般方式。
@monk 您是否按照说明更改了变量以反映您的脚本？还是您只是复制粘贴？
我确实改变了它，但到目前为止没有运气......顺便说一句，我非常喜欢你的编程风格
mysqli_query() 的第二个参数应该是什么
@monk 我已经更新了 sn-p。我认为存在语法错误。