Question

如何从mysql数据库动态加载图像到Nivo滑块我在我的应用程序上使用Nivo滑块，我想要的是将mysql数据库中的图像转换为Nivo滑块。

这是我的脚本：

<!DOCTYPE >
<head>
<title>jQuery Nivo Slider Demo</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">

<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> 


 <?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server
$db = mysql_select_db("user"); // Selecting Database

 $sql = mysql_query("SELECT * FROM images ORDER BY image DESC LIMIT 10")or die(mysql_error());
        while($row = mysql_fetch_array($sql)){
            $image = $row['image'];
            $id = $row['id'];
            $pic = "upload/$image";
            if (file_exists($pic)) {
               echo '<img src=\"upload/$image\"/>'; // image path 
               echo $i++;
            }
        }
    ?>

  <img src="upload/1.jpg" data-thumb="upload/1.jpg" alt=""/>

</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.nivo.slider.js"></script> 
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script> 
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

Answer 1

您需要做的是在滑块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>

如何从mysql数据库动态加载图像到Nivo滑块

1 个答案: