从mysql数据库动态加载图像到jquery滑块

Question

I have written a web application that involves having users upload pictures to the site. On the homepage, I dynamically show the newest pictures/items uploaded in PHP, limiting it to ten. However, the page looks so static and I have searched on Google, bing, ask, yahoo, etc for days now and haven't had any answers.

I have written the code to store store the images, and get them from the db. The images are shown on the homepage, and the only thing i have left to do is load it in a slider.

$sql = mysql_query("SELECT * FROM items ORDER BY item_date_added DESC LIMIT 10")or die(mysql_error());
while($row = mysql_fetch_array($sql)) {
    //$user_id = $row['user_id'];
    $item_name = $row['item_name'];
    $item_id = $row['item_id'];

    $check_pic = "users/$item_name.jpg";

    if (file_exists($check_pic)) {
        $show_pic = "<img src=\"users/$item_name.jpg\" width=\"100px\" height=\"100px\" border=\"5\" id='img'/>";

        //$user_pic3 = "<img src=\"users/$rid/image01.jpg\" width=\"50px\" height=\"50px\" border=\"1\" />";
        //$MemberDisplayList .= '<a href="profile2/index.php?id=' . $rid . '">' . $user_pic3 . '</a>';
        $i++;
        $show_new_items .= "<a href='item_view?item_id=$item_id&&session_item=$item_id'>$show_pic</a>";
    }
    $newly_listed_names .= " <a href='item_view?item_id=$item_id&&session_item=$item_id'> $item_name </a> | ";
}

///////// END SHOW NEWLY ADDED ITEMS ///////////////////////////////////////////////////

the newly added items in echoed in a div in the body.

Can anyone help me please! it's been bothering me for a while now. Thanks.

Answer 1

To use Nivo, you need to generate html that looks something like this... (Download the nivo demo and open up the demo.html for the full source).

So all you need to do is output your images in a loop inside the slider div.

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
    <?php
        while($row = mysql_fetch_array($sql)){
            $item_name = $row['item_name'];
            $item_id = $row['item_id'];
            $check_pic = "users/$item_name.jpg";
            if (file_exists($check_pic)) {
                print "<img src=\"users/$item_name.jpg\"/>";
                $i++;
            }
        }
    ?>
            <img src="images/2.jpg" data-thumb="images/2.jpg" alt=""/>
        </div>
    </div>
</div>

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>