CODEWITHSUNDEEP
phpmysql
mandeeya
mandeeya

Reputation: 31

load images dynamically in php from mysql database into a jquery slider

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.

Upvotes: 1

Views: 15487

Answers (2)

Basic
Basic

Reputation: 26766

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>

Upvotes: 1

Vinay
Vinay

Reputation: 2594

You can use jquery plugins such as Nivo. Or you can try different jquery plugin from this link. And integrate it with your code.

Upvotes: 0

Related Questions