通过Jquery从mysql显示图像?

时间:2011-10-23 15:47:18

标签: php jquery mysql image

嗯,好了! 我通过mysql数据库获取请求获取一系列图像!并将其显示为幻灯片。它的工作!但我现在要做的是,用Jquery显示相同的图像。

    <?php require("Connections/db_con.php"); ?>
    <?php
    $title = "slideshow";
    $id = mysql_real_escape_string((int)$_GET['id']);
    $query_pic = "SELECT * FROM photos WHERE listing_id = $id ";
    $result_pic = mysql_query($query_pic , $db_con);
    $num_pic = mysql_num_rows($result_pic);
    $row_pic = mysql_fetch_array($result_pic);


    if($num_pic != 0) { 
        $image_set = array();
        $result = mysql_query("SELECT name FROM photos WHERE listing_id= $id");
        while($images = mysql_fetch_array($result)) {
            array_push($image_set, $images['name']);
        }
    }
    ?>

    <html>
    <head>
    <title><>php echo $title; ?></title>

    <link rel="stylesheet" href="stylesheets/styles/styles.css" media='all'/>
    <link href="stylesheets/layout.css" media="all"/>
    <link rel="stylesheet" href="stylesheets/styles/slideshow.css" media='all'/>
    <script type='text/javascript'>

    var photos  = new Array(<?php echo "'".implode("','", $image_set)."'"; ?>);
    var start   = 0; // array index of first slide
    var end     = <?php echo $num_pic -1; ?>; // array index of last slide
    var current = start;
    var doplay  = true; // do not play show automatically
    // skip to first slide
    function first() {
        current = 0;
        change();
    }

    // advance to next slide
    function previous() {
        current -= 1;
        if(current < start) current = end; // skip to last slide
        change();
    }

    // go back to previous slide
    function next() {
        current += 1;
        if(current > end) current = start; // skip to first slide
        change();
    }

    // skip to last slide
    function last() {
        current = end;
        change();
    }

    // change slide according to value of current
    function change() {
        document.photo.src = 'uploads/' + photos[current];
    }

    // play automatic slideshow
    function play() {
        if(doplay == true) {
            next();
            setTimeout(play, 2000); // call play() in 2.5 seconds
        }
    }

    // pause slideshow
    function pause() {
        doplay = false;
    }

    </script>
    </head>

    <body>

    <div id='container'>


    <div class='form'>

        <div id='photobox'>

            <img name='photo' src='uploads/<?php echo $image_set[0]; ?>' alt=''/><br /><br />
            <?php // echo "Total " . $num_pic . " photo(s) found" ; ?>

        </div>


    </div>

    </div>
    </body>
    </html>

我如何用jquery幻灯片显示相同的检索图像,而不是我现在正在显示的那个?...我努力但每次都失败.. :(

1 个答案:

答案 0 :(得分:1)

此:

var photos  = new Array(<?php echo "'".implode("','", $image_set)."'"; ?>);

应该是

var photos = <?php echo json_encode($image_set) ?>;

json_encode将处理PHP数组的所有格式化/转义为等效的Javascript语法,而不会出现一个或多个文件名中任何JS元字符导致JS语法错误的危险。

除此之外,jquery究竟出现了什么问题?你应该显示你的jquery代码,因为那就是问题所在。向我们展示旧代码毫无意义。