2

Necesito poner el componente de LIGHTBOX dentro de php al momento de crear una tabla con echo, he intentado con las librerías de css y js que he visto en internet pero no me funciona, anexo el código:

$query = $db->prepare($sql); 
$query->execute(); 

echo  '<thead>
       <tr>    
          <th nowrap>Pregunta</th>
          <th nowrap>Respuesta</th>
          <th nowrap>Imagen</th>
          <th nowrap>Video</th>
          <th nowrap>Firma</th>
       </tr>
       </thead>

   <tbody>';

   foreach ($query as $valor) {
         echo  '<br />
        <tr>
          <td nowrap  style="width: 350px; text-align:center;">'. $valor[0] . '</td>
          <td nowrap  style="width: 120px; text-align:center;">'  . $valor[1] . '</td>
          <td nowrap  style="width: 200px; text-align:center;"><a target="_blank"  href="../img_uploaded/'.$valor[2].'" rel="lightbox" >' . $valor[2] . '</a></td>                       
          <td nowrap  style="width: 200px; text-align:center;"><a target="_blank"  href="../img_uploaded/'.$valor[3].'" rel="lightbox" width="150" height="150" >' . $valor[3] . '</a></td>
          <td nowrap  style="width: 200px; text-align:center;"><a target="_blank"  href="../img_uploaded/'.$valor[4].'" rel="lightbox" >' . $valor[4] . '</a></td>  <br>        
        </tr> <br />';    
   }  

En el hre="href="../img_uploaded/'.$valor[4].'" se encuentra la dirección de la fotografía que quiero mostrar.

6
  • 1
    En que parte estas incluyendo las librerias de lightbox??
    – chenio
    Commented el 12 oct. 2016 a las 14:57
  • antes de abrir el <?php Commented el 12 oct. 2016 a las 16:53
  • Puedes postear como lo estas haciendo y que funciones utilizas?
    – chenio
    Commented el 12 oct. 2016 a las 20:58
  • Cual es el error que te sale? Commented el 12 oct. 2016 a las 23:03
  • Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org. Commented el 13 oct. 2016 a las 15:31

2 respuestas 2

1

Para crear un lightBox desde cero ya sea con javascript o jquery es algo tedioso, no complicado por lo cual ya hay un sin fin de librerías o herramientas que te facilitan el poder hacer un lightbox ya sea con paginas embebidas,vídeos o imágenes, a continuación te dejo un listado de las que yo mas uso y con un breve ejemplo.

1.- Html5Box - Esta herramienta es la mas básica de las que eh usado, solo debes descargar los ficheros de Js y css para que funcione y mas aparte agregar las clases que el tutorial de la pagina oficial te indique. (Esta en Ingles)

https://html5box.com/html5lightbox/ - (Pagina Oficial)

2.- h5-lightbox - Esta herramienta es similar a la de HTML5Box, lo unico que suele variar es el estilo de las ventanas emergentes, aquí abajo te dejare el link de GitHub para que puedas descargarlo y ver como se usa (Esta en ingles)

https://github.com/morganestes/h5-lightbox

Tu mencionaste que en tu href esta la imagen ahí debes de poner el class="Nombre_Liberia" mas aparte verifica que tengas los metodos jquery necesarios la librería que necesites y que las rutas js y css estén correctas, y como lo estas haciendo en php no pongas ni comilla dobles o comillas simples en el class, ya que como esta dentro de comillas para crearlo se ejecutara.

Nota: No olvides que ambas librerías llevan una determinada versión de Jquery para que puedan funcionar.

4
  • Ya trate de agregar las librerias que mencionas pero me topo con el mismo error que me ha dado. Commented el 12 oct. 2016 a las 16:30
  • Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org. Commented el 12 oct. 2016 a las 16:31
  • @Aruro Gyy - Agrega jquery,el js, el css y las clases y divs necesarios, de preferencia inténtalo hacer en un archivo php desde cero con un simple botón como prueba y cuando te salga bien ahí intenta pasarlo a tu proyecto de producción, recuerda que no debes poner " " ni ' ' en el class cuando estas en php, si te vuelve a marcar error o no te aplica la libreria, manda una actualizacion de tu pregunta de como lo estas agregando para ver tu posible error
    – David
    Commented el 12 oct. 2016 a las 17:06
  • Que tal David, ya pude crear el listbox de la paginahttp://lokeshdhakar.com/projects/lightbox2/ y segui los pasos pero lo qe pasa que al agregar este directorio en la parte de arriba de mi php <link href="../resources/csss/lightbox.css" rel="stylesheet"> si hace el efecto de el listbox pero la tabla que tengo donde contiene el link de la foto,esa tabla se le quita las celdas y se convierte en lineas horizontales, y si le quito el <link href="../resources/csss/lightbox.css" rel="stylesheet"> que le puse arriba de mi php si funciona normal pero ovio no funciona el lightbox Commented el 17 oct. 2016 a las 16:03
0

Según entiendo el problema es éste:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org.

Este aviso es debido a la forma en que se utilizan las llamadas AJAX. Lo que indica es que el navegador está esperando a que retorne una llamada para poder seguir con el resto de la página. Puede ocurrir por diversos motivos, por ejemplo basta usar async: false, (ya deprecated) como opción en una llamada AJAX (con jQuery) para mostrar el aviso, pero hay muchos otros casos.

Yo buscaría el problema en el código Javascript, en concreto en las llamadas consecutivas AJAX del mismo.

5
  • si enconte que seria de la forma asyncrona pero lo tendria que modificar en el archivo del lightbox? Commented el 12 oct. 2016 a las 16:59
  • Eso ya no puedo saberlo, tendría que ver los plugin de lightbox que realmente utilizas. Quizás una solución (antes que ponerse a modificar un plugin de terceros) sería probar con otro plugin similar que no requiera hacer muchos cambios en tu código. Crea una copia de tu proyecto (para volver atrás fácilmente) y trata de usar otro plugin en la nueva copia.
    – Darío Pm
    Commented el 12 oct. 2016 a las 17:06
  • El término LIGHTBOX fue "acuñado" por el creador del plugin http://lokeshdhakar.com/projects/lightbox2/ (en su versión actual), pero desde entonces ha sido utilizado por multitud de otros creadores habiendo cientos diferentes en la actualidad.
    – Darío Pm
    Commented el 12 oct. 2016 a las 17:23
  • Que tal Dario, ya pude crear el listbox de la pagina qe me mandaste y segui los pasos pero lo qe pasa que al agregar este directorio en la parte de arriba de mi php <link href="../resources/csss/lightbox.css" rel="stylesheet"> si hace el efecto de el listbox pero la tabla que tengo donde contiene el link de la foto,esa tabla se le quita las celdas y se convierte en lineas horizontales, y si le quito el <link href="../resources/csss/lightbox.css" rel="stylesheet"> que le puse arriba de mi php si funciona normal pero ovio no funciona el lightbox Commented el 17 oct. 2016 a las 16:02
  • Tiene pinta de ser un problema con una "colisión" CSS. Usa el inspector para ver que estilos tienen la tabla, sus filas y sus columnas y trata de localizar qué estilo causa el problema. Lo más fácil es añadir entonces tu propio estilo para que corrija el problema en ese caso en concreto.
    – Darío Pm
    Commented el 19 oct. 2016 a las 12:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.