Phantom_strike Phantom_strike - 5 months ago 12
PHP Question

How to display database information next to an image with JQuery?

Hi everybody I want to display any kind of information from the database on every different image in the gallery (This is how it looks) pretty similar to RedBox but I don't have any idea how to do it, does anybody have any solution for this?

P.S: btw I'm using sql server 2008

This is what I have so far...

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

Your code looks fine, this is re-write (slightly different) of your Connection.php with a sample of database information beside the image.

<?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>

A sample snippet showing info beside image (to use it in your example add the css,js and HTML changes provided)

$("#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