CODEWITHSUNDEEP
phpjquerymysql
Butter Toast
Butter Toast

Reputation: 105

Display images on product preview slider

I want to select images from my table to display on product preview slider like this Demo.

TABLE fm_product_image

| img_id | p_id_img | img_name          |
-----------------------------------------
|    1   |    60    | upload/demo_2.jpg |
|    2   |    60    | upload/demo_3.jpg |

<?php
include('connect.php');
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->

    <title>TEST</title>
</head>
<body>
    <ul class="cd-gallery">
        <li style="cursor: pointer;">
                <ul class="cd-item-wrapper">
                    <?php $result= mysql_query("SELECT img_name FROM fm_product_image WHERE p_id_img = 60") or die (mysql_error());
                    while ($rows = mysql_fetch_array ($result) ){ ?>
                    <li class="selected">
                        <img src="<?php echo $rows['img_name']; ?>" alt="Preview image">
                    </li>
                    <?php } ?>
                </ul> <!-- cd-item-wrapper -->
            <div class="cd-item-info">
                <b><a href="#0">TEST</a></b>
                <em class="cd-price">$26</em>
            </div> <!-- cd-item-info -->
        </li>
    </ul> <!-- cd-gallery -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

My code given output by display two images and I can't click to move the slide.

Upvotes: 0

Views: 415

Answers (1)

Shailesh Singh
Shailesh Singh

Reputation: 315

put this code in your slider section

 <?php $result= mysql_query("SELECT img_name FROM fm_product_image WHERE p_id_img = 60") or die (mysql_error());
$i=1;
                        while ($rows = mysql_fetch_array ($result) ){ ?>
                        <li <?php if($i==1){?>class="selected"<?php }?>>
                            <img src="<?php echo $rows['img_name']; ?>" alt="Preview image">
                        </li>
                        <?php $i++;} ?>

hope this will help you !

Upvotes: 1

Related Questions