Visor de imágenes obtenidas de sql php
Perdón una consulta en la que me atore, espero puedas ayudarme te lo agradecería infinitamente, te explico mis códigos...
Aquí muestro una serie de imágenes provenientes de una carpeta, con su respectivo path en un campo de mi BD, selecciona únicamente los archivos de una fecha en especifico
¿
¿<?php
if (isset($_GET['recordID'])) {
$colname_DetailRS4 = $_GET['recordID'];
}
mysql_select_db($database_conexion, $conexion);
$view1=sprintf("select * from he_upload_estudios where fecha_estudio = %s", GetSQLValueString($colname_DetailRS4, "date"));
$view = mysql_query($view1, $conexion) or die(mysql_error());
while($row=mysql_fetch_array($view))
{
$path=explode("*",$row['jpg']);
$i=count($path);
$file_path = '/uploads/';
for($j=0;$j<$i;$j++)
{
$src=$file_path.$path[$j];
?>
<div style="width:200px; float:left; height:200px; margin-top:20px; border:dashed 2px #0099FF;">
<a href="<?php echo $src; ?>"><img src="<?php echo $src; ?>" width="200" height="200"></a>
</div>
<?php } } ?>Lo que muestra es esto... SON IMÁGENES "X" por pruebas...
Tengo este otro código de un visor de imágenes, que encontré navegando..
<div class="container_galeria">
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« Anterior</a> | <a href="#" onclick="$.galleria.next(); return false;">siguiente »</a></p>
<ul class="galeria">
<?php
$dir = "../../uploads/";
$dr = opendir($dir);
if (!$dr){
echo "Error";
exit();
}
else {
while (($archivo = readdir($dr)) !== false) {
if(filetype($dir . $archivo)!="dir"){
if(($archivo != "Thumbs.db") && ($archivo != ".htaccess")){
if ($i == 0)
$active = " class=\"active\"";
else
$active = "";
$tam = round(filesize($dir . $archivo)/1024, 0);
echo "<li".$active."><img src=\"".$dir.$archivo."\" alt=\"Archivo: ".$archivo."\" title=\"Archivo: ".$archivo." Tamaño: ".$tam." Kb\"></li>";
++$i;
}
}
}
closedir($dr);
}
?>
</ul>
</div>
<div id="cuadro_imagen"></div>Lo que muestra es esto... SON IMÁGENES "X" por pruebas...
Aquí me muestra todas las imágenes que tengo en la carpeta...
Mi consulta es como puedo adaptar mi código que ya tengo a este que encontré, espero me de a entender ya que quisiera mostrar las imágenes de esta forma...
El cambio que hay que realizar es el siguiente.
El primer script funciona con html "puro" y rescatando las imágenes desde los registros de tu base de datos. El segundo script usa un plugin javascript y rescata todas las imágenes que están en un directorio de tu sistema operativo.
La modificación es usar la lógica del primero pero con la implementación del segundo. Veamos si funciona de esta forma:
<div class="container_galeria">
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« Anterior</a> | <a href="#" onclick="$.galleria.next(); return false;">siguiente »</a></p>
<ul class="galeria">
<?php
if (isset($_GET['recordID'])) {
$colname_DetailRS4 = $_GET['recordID'];
}
mysql_select_db($database_conexion, $conexion);
$view1=sprintf("select * from he_upload_estudios where fecha_estudio = %s", GetSQLValueString($colname_DetailRS4, "date"));
$view = mysql_query($view1, $conexion) or die(mysql_error());
$file_path = '/uploads/';
while($row=mysql_fetch_array($view)){
$path=explode("*",$row['jpg']);
$e=count($path);
$file_path = '/uploads/';
if ($i == 0){
$active = " class=\"active\"";
}else{
$active = "";
}
for($j=0;$j<$e;$j++){
$src=$file_path.$path[$j];
echo "<li".$active."><img src=\"".$src."\" alt=\"Archivo: archivo\" title=\"Archivo: archivo Tamaño: tamano Kb\"></li>";
}
++$i;
}
?>
</ul>
</div>
<div id="cuadro_imagen"></div>No entiendo la la parte donde haces el for, quizá falle en algo ahi.
Para completar la información de nombre de archivo y de tamaño hay que buscar esa información en la base de datos. Como desconozco la estructura de las tablas no lo coloqué para evitar confusiones.
Wowo! Amigo que te digo un millón de gracias, por más que yo intente jugar y acomodar no logre hacer esta lógica, ya funciono a la perfección, pero pero otra consulta dentro de esta, ¿hay alguna forma o método o no se cualquier cosa que al mostrarme la imagen del costado derecho pueda poner algunos botones de zoom y de contraste?
Mil gracias
Saludos
.
Para hacer zoom en las imágenes hay plugins jquery para trabajar, te dejo uno para ver si se puede implementar sobre lo que ya has trabajado.
http://www.elevateweb.co.uk/image-zoom/examples
No tengo actualmente las herramientas como para poder ayudarte en concreto con tu script porque desconozco la implementación completa. De esta forma no se si usar los dos plugins al mismo tiempo puede traer algún "bloqueo" o conflicto uno del otro.
La implementación de este script de zoom es bastante simple, pero hay que identificar la el id imagen "grande" de tu galería y aplicar el zoom ahí.
<!-- La imagen "grande" quedaría así -->
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
//la implementación javascript sería así
$("#zoom_01").elevateZoom();Si necesitas más ayuda me dices y vemos como solucionamos tu problema y llegamos a una solución.
1 respuesta más de otro experto
Que tal te pongo el código:
<div class="container_galeria">
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« Anterior</a> | <a href="#" onclick="$.galleria.next(); return false;">siguiente »</a></p>
<ul class="galeria">
<?php
if (isset($_GET['recordID'])) {
$colname_DetailRS4 = $_GET['recordID'];
}
mysql_select_db($database_conexion, $conexion);
$view1=sprintf("select * from he_upload_estudios where fecha_estudio = %s", GetSQLValueString($colname_DetailRS4, "date"));
$view = mysql_query($view1, $conexion) or die(mysql_error());
while($row=mysql_fetch_array($view))
{
$path=explode("*",$row['jpg']);
$i=count($path);
$file_path = '/uploads/';
for($j=0;$j<$i;$j++)
{
$src=$file_path.$path[$j];
$active=($j==0)?'class=\"active\"':"";?>
<li <?php echo $active;?>>
<a href="<?php echo $src; ?>"><img src="<?php echo $src; ?>" width="200" height="200"></a>
</li>
<?php } } ?>
</ul>
</div>
<div id="cuadro_imagen"></div>Tienes que adaptar un poco el primer script al segundo y listo.
Visita:http://develoteca.com
Recomienda este curso: https://www.youtube.com/watch?v=yn0yOjlKEiY&index=1&list=PLSuKjujFoGJ1Xyq6FYGkPOQ3yzrCE-gW1