如何使用JQuery在圖像旁顯示數據庫信息？

大家好，我想在庫中的每個不同圖像上顯示來自數據庫的任何類型的信息（This is how it looks），與RedBox非常相似，但我不知道如何去做，有沒有人有任何解決方案？如何使用JQuery在圖像旁顯示數據庫信息？

PS：順便說一句，我使用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; 
}

來源

2016-06-13 Phantom_strike

究竟出了什麼問題用上面的代碼？ –

上面的代碼沒有問題，但我不知道如何顯示懸停中的數據庫信息或像RedBox那樣的類似信息，它們在圖像旁邊的懸停中顯示電影的信息，我想在我的代碼中做到這一點 –

我已經更新了我的答案，並在屏幕上顯示了鼠標旁邊的圖像旁邊的文字演示 –

您的代碼看起來不錯，你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

來源

2016-06-13 01:47:19

哇你真的幫了我很多，非常感謝你這正是我正在尋找的東西：D –

@Phantom_strike很高興這是有幫助的:) –

如何使用JQuery在圖像旁顯示數據庫信息？

回答

相關問題