phpjquerynivo-slider

Nivo slider + php


I created a custom cms for a website and trying to make the nivo slider work with my db but im having issues with my while loop. im only storing the name of the image in the db and the image itself its in a folder, images are working somewhat but they appear on above the other the the actual slideshow is broken.

my guess is that the title id is breaking it but not sure on how to go from here. any help is appreciated

here is my code:

<div id='slider' class='nivoSlider'>
<?php 
$sql = 'SELECT * FROM slider';
$result = $db->query($sql) or die(mysqli_error());

 while($row = $result->fetch_assoc()){
    $slideshow = $row['slider_id']; 
    print"
        <img src='images/slider/".$row['image'].".jpg' alt='' title='#htmlcaption'>
        </div>
        <div id='htmlcaption' class='nivo-html-caption '>
        <span>".$row['title'] . "</span>    
        </div> ";
}

?>
<div id='preloader'></div>
</div>

Solution

  • while($row = $result->fetch_assoc()){
    $slideshow = $row['slider_id']; 
    print"
        <img src='images/slider/".$row['image'].".jpg' alt='' title'#htmlcaption'>
        </div> // ---------------> Here you are closing div slider
        <div id='htmlcaption' class='nivo-html-caption '>// ----> Error
        <span>".$row['title'] . "</span>    
        </div> ";
    

    }

    In while loop you are closing </div> without opening it,This cause broken slide show.In HTML syntax id's must be unique. So <div id='htmlcaption' class='nivo-html-caption '> so change this part.

    [Update] change print to

     print" <div class='some_wraper'>
            <img src='images/slider/".$row['image'].".jpg' alt='' title='#htmlcaption'>
            </div> // ---------------> Here now you are closing div some_wraper
            <div class='nivo-html-caption htmlcaption'>// ----> added new class htmlcaption
            <span>".$row['title'] . "</span>    
            </div> ";
    

    Update Fixed code

     <div id='slider' class='nivoSlider'>
        <?php 
    
        $sql = 'SELECT * FROM slider';
        $result = $db->query($sql) or die(mysqli_error());
    
         for($i = 0;$row = $result->fetch_assoc();$i++){
            $slideshow = $row['slider_id']; 
            echo "<img src='images/slider/".$row['image'].".jpg' alt='' title='htmlcaption_$i'>";                
            $tiles[$i]=$row['title'];        
        }
    
        ?>
        </div>        
       <?php //caption divs for slider
          for($i=0;$i<count($tiles);$i++) {
            echo "<div id='htmlcaption_$i' class='nivo-html-caption '>";      
                echo "<span>".$tiles[$i]."</span> </div>";
            }   
        ?>        
        <div id='preloader'></div>
        </div>