Question

大家好我想在数据库中显示图库中每个不同图像的任何信息（This is how it looks），与RedBox非常相似，但我不知道怎么做做到这一点，有人有任何解决方案吗？

P.S：顺便说一句，我使用的是sql server 2008

这就是我到目前为止......

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Tablero</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <section class="tagline">
            <h1>Jueces</h1>
        </section>
        <div id="container">
            <h1 id="heading"> Projects</h1>
            <ul id="gallery"></ul>
        </div>
        <script>
            $(document).ready(function() {
                setInterval(function() {
                    $("#container").load('connection.php');
                }, 1000);
            });
        </script>

    </body>
</html>

Connection.php

<?php 
$server = "localhost";
$user = "perron";
$password = "hasg";
$database = "ejemplo";
$conn = odbc_connect("Driver={SQL Server Native Client 10.0}; Server=$server; Database=$database;", $user, $password);
$sql = "SELECT * FROM Prueba";
$rs = odbc_exec($conn, $sql);
if (!$rs) { exit("Error en la consulta SQL");
}
?>

<div class="container">
    <div id="container">
        <h1 id="heading"> Projects</h1>
        <ul id="gallery">
            <?php do{
            ?>
            <?php $resultado_img = odbc_result($rs, "img");
            $resultado_id = odbc_result($rs, "id");
            $resultado_nombre = odbc_result($rs, "nombre");
            $resultado_fecha = odbc_result($rs, "fecha_aud");
            $resultado_hora = odbc_result($rs, "hora_aud");
            $resultado_juzgado = odbc_result($rs, "juzgado");
            ?>
            <?php echo '<li><img src="img/' . $resultado_img . "\" alt=\"\" height=\"200\" width=\"200\" /></li>"; ?>
            <?php }
                while ( odbc_fetch_row($rs) )
            ?>
        </ul>
    </div>
</div>

的style.css

body {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 15px;
    color: #666;
    text-decoration: none;
    line-height: 1.6em;
}
a {
    color: #666;
    text-decoration: none;
}
.container {
    width: 80%;
    margin: auto;
    overflow: auto;
}
.logo {
    float: left;
    width: 30%;
    margin-top: 15px;
}
section {
    padding: 20px 0;
    overflow: hidden;
}
.tagline {
    background: #03899c;
    color: #fff;
}
.tagline h1 {
    text-align: center;
    font-size: 35px;
}
#gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#gallery li {
    display: block;
    float: left;
    width: 23%;
    cursor: pointer;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0 12px 7px 0;
}
#gallery img {
    width: 100%;
    border-radius: 5px;
}

Answer 1

您的代码看起来很好，这是 Connection.php 的重写（稍有不同），并在图片旁边添加了数据库信息示例。

<?php
$server="localhost";
$user="perron";
$password="hasg";
$database="ejemplo";

$conn = odbc_connect("Driver={SQL Server Native Client 10.0}; Server=$server; Database=$database;", $user, $password);

$sql = "SELECT * FROM Prueba";

$rs = odbc_exec( $conn, $sql );
if ( !$rs ) { exit( "Error en la consulta SQL" ); }
?>

<div class="container">
<div id="container">
    <h1 id="heading"> Projects</h1>
    <ul id="gallery">
  <?php 
$li = "";
while (odbc_fetch_row($rs)) {
  $resultado_img=odbc_result($rs, "img");
  $resultado_id=odbc_result($rs, "id");
  $resultado_nombre=odbc_result($rs, "nombre");
  $resultado_fecha=odbc_result($rs,"fecha_aud");
  $resultado_hora=odbc_result($rs,"hora_aud");
  $resultado_juzgado=odbc_result($rs,"juzgado");            
  $li.="<li><img src=\"img/".$resultado_img."\" alt=\"\" height=\"200\" width=\"200\" />";
  $li.="<div id=\"info\">".$resultado_nombre;
  $li.="<br>".$resultado_fecha;
  $li.="<br>".$resultado_hora;
  $li.="<br>".$resultado_juzgado."<div></li>";
        } 
  echo $li;  
        ?>
     </ul>
</div>
</div>

在图片旁边显示信息的示例代码段（在您的示例中使用它添加提供的css，js和HTML更改）

$("#gallery img").on('mouseover',function(){
$(this).parent("li").find("#info").toggle("show");
}).on('mouseout',function(){
$(this).parent("li").find("#info").toggle("hide");
});

#gallery li{
display: block;
float: left;
width: 100%;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
}
#gallery img{
width: 25%;
float: left;
border-radius: 5px;
}
#gallery #info {
width: 70%;
float: left;
margin-left:.5em;
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="gallery">
<li><img src="https://farm6.staticflickr.com/5548/11874722676_6450fcb8ba_b.jpg" />
<div id="info">
id<br>name<br>text<br>text
</div></li></ul>

Fiddle

如何使用JQuery在图像旁边显示数据库信息？

1 个答案: