Create LightBox in php


I need to put the LIGHTBOX component in php when creating a table with echo , I have tried with the css and js libraries that I have seen on the internet but it does not work for me, attach the code:

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

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


   foreach ($query as $valor) {
         echo  '<br />
          <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 />';    

In the hre="href="../img_uploaded/'.$valor[4].'" you can find the address of the photo that I want to show.

asked by Aruro deGyy 12.10.2016 в 16:40

2 answers


To create a lightBox from scratch either with javascript or jquery is somewhat tedious, not complicated so there are already endless libraries or tools that make it easy to make a lightbox with embedded pages, videos or images , then I leave you a list of the ones I use the most and with a brief example.

1.- Html5Box - This tool is the most basic of the ones I've used, you just have to download the files of Js and css to make it work and more apart to add the classes that the tutorial of the official website indicates. (It is in English)

link - (Official Page)

2.- h5-lightbox - This tool is similar to HTML5Box, the only thing that usually varies is the style of pop-ups, here below I'll leave you the GitHub link so you can download it and see how it is used ( It's in English)


You mentioned that in your href is the image there you must put the class="Nombre_Liberia" but apart verify that you have the necessary jquery methods the library that you need and that the js and css routes are correct, and how are you doing in php do not put double quotation marks or single quotes in the class, because since it is in quotes to create it, it will be executed.

Note: Do not forget that both libraries have a certain version of Jquery so they can work.

answered by 12.10.2016 в 16:56

As I understand the problem is this:


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

This notice is due to the way AJAX calls are used. What it indicates is that the browser is waiting for a call to return in order to continue with the rest of the page. It can happen for various reasons, for example just use async: false, (already deprecated) as an option in an AJAX call (with jQuery) to display the warning, but there are many other cases.

I would look for the problem in the Javascript code, specifically in the consecutive AJAX calls of the same.

answered by 12.10.2016 в 18:55