Question

这是我的代码，实际上，它实际上是检索数据，但是看起来很糟糕。

我按顺序加载Jquery，（nivoSlider）和Bootstrap。

我在DB上有2个结果，它成功获取标题，描述和其他信息，但它看起来格式不好，或者我无法正确显示信息。

问题：我怎样才能实现这一点 - ＆gt; http://prntscr.com/5imr6e到此 - ＆gt; http://prntscr.com/5imy35 - 有适当的缩略图吗？

任何帮助将不胜感激。谢谢

$sql = "SELECT * FROM homeslider ORDER by id DESC LIMIT 6";
        $query = $handler->prepare($sql);
        $query->execute();
        $row = $query->fetchAll();
        return $row;
    }

    ?>
    <?php 
$data = getContent();  
foreach ($data as $row) {
 echo '<div id="wrapper">
 <div class="slider-wrapper theme-default">
 <div id="slider" class="nivoSlider">
 ';
   $id = $row['id'];
   $titulo = $row['titulo'];
   $descripcion = $row['descripcion'];
   $link = $row['link'];
   $imgurl = $row['imgurl'];
   $ultimo_update = $row['ultimo_update']; 
   $captions = '';   
 }   
 echo'
 <img src="images/slider/'.$imgurl.'" data-thumb="images/slider/'.$imgurl.'" data-transition="fold" title="#htmlcaption_'.$id.'" />'; ?>

    <?php $captions = '<div id="htmlcaption_'.$id.'" class="nivo-html-caption">
     '.$titulo.'<br/>'.$descripcion.'<span class="nivoButtonSpan"><a href="'.$link.'" class="btn btn-default" style="color:#000;">Leer más <i class="glyphicon  glyphicon-share-alt"></i></a></span>';?>
     </div> <!-- Close htmlcaption_# -->

     <?php echo $captions; ?>
</div> <!-- Close slider -->
</div> <!-- Close slider-wrapper -->
</div> <!-- Close wrapper -->

Answer 1

您似乎没有关闭nivoslider div：

echo'
 <img src="images/slider/'.$imgurl.'" data-thumb="images/slider/'.$imgurl.'" data-transition="fold" title="#htmlcaption_'.$id.'" />'; ?>

    <?php $captions = 'CLOSE HERE: </div><div id="htmlcaption_'.$id.'" class="nivo-html-caption">
     '.$titulo.'<br/>'.$descripcion.'<span class="nivoButtonSpan"><a href="'.$link.'" class="btn btn-default" style="color:#000;">Leer más <i class="glyphicon  glyphicon-share-alt"></i></a></span>';?>
     </div> <!-- Close htmlcaption_# -->

Answer 2

首先要做的是将其切换为使用更易读的输出语法 - 打破和退出php，而不是将所有html作为完整字符串回显。此外，我认为你想要所有的图像都是幻灯片，但我很确定你实际上是为每个图像创建一个滑块......

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <?php foreach($data as $row): ?>
                <?php // lets use printf since the majority of this is static with just a couple vars ?>
                <?php printf(
                    '<img src="images/slider/%s" data-thumb="images/slider/%s" data-transition="fold" title="#htmlcaption_%s" />',    
                    $row['imgurl'], 
                    $row['imgurl'], 
                    $row['id']
                );  ?>                    
            <?php endforeach; ?>
        </div> <!-- Close slider -->

        <?php // output the captions ?>
        <?php foreach ($data as $row): ?>
            <div id="htmlcaption_<?php echo $row['id'] ?>" class="nivo-html-caption">
                <?php echo $row['titulo']; ?>
                <br />
                <?php echo $row['descripcion'] ?>
                <span class="nivoButtonSpan">
                    <a href="<?php echo $row['link'] ?>" class="btn btn-default" style="color:#000;">Leer más <i class="glyphicon   glyphicon-share-alt"></i></a></span>
                </span>
            </div>
        <?php endforeach; ?>

    </div> <!-- Close slider-wrapper -->
</div> <!-- Close wrapper -->

我们可以通过在循环中构建大量字幕来进一步优化这一点，这样我们就不需要在数组上循环两次了：

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <?php
                // initialize captions as an empty string 
                $captions = ''; 
            ?>
            <?php foreach($data as $row): ?>
                <?php // lets use printf since the majority of this is static with just a couple vars ?>
                <?php printf(
                    '<img src="images/slider/%s" data-thumb="images/slider/%s" data-transition="fold" title="#htmlcaption_%s" />',    
                    $row['imgurl'], 
                    $row['imgurl'], 
                    $row['id']
                );  ?>
                <?php ob_start(); // start a buffer ?>
                <div id="htmlcaption_<?php echo $row['id'] ?>" class="nivo-html-caption">
                    <?php echo $row['titulo']; ?>
                    <br />
                    <?php echo $row['descripcion'] ?>
                    <span class="nivoButtonSpan">
                        <a href="<?php echo $row['link'] ?>" class="btn btn-default" style="color:#000;">Leer más <i class="glyphicon   glyphicon-share-alt"></i></a></span>
                    </span>
                </div>
                <?php
                    // get the buffer contents, append them to $captions 
                    // and then clear the buffer and stop buffering
                    $captions .= ob_get_clean();  
                ?>
            <?php endforeach; ?>
        </div> <!-- Close slider -->

        <?php // output the captions ?>
        <?php echo $captions; ?>
    </div> <!-- Close slider-wrapper -->
</div> <!-- Close wrapper -->

在MYSQL，PDO中从DB获取图像并将其放入到foreach中

2 个答案: