Question

I would really appreciate if anyone can spot anything that I am doing wrong here!

I am attempting to use this plug-in: http://www.sebastianoarmelibattana.com/projects/jail

I have included it in my web page which is a search form that submits via an AJAX request and displays the search results in a table. This table happens to be another plugin called dataTables.

Here are the relevant bits of code:

The re-initialisation of the plug-ins after the AJAX request has been successfully completed (the same initialisation is done in the actual HTML page aswell):

 // re-initialise lazyload, lightbox and dataTable plugins

        $('img.lazy').jail();

        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "bPaginate": false,
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });

This is the line of php that displays the relevant table cell with the thumbnail in it:

 $shortname = $row['filename'];
 $doc = "/central/testdocs/".$row['filename'];
 $thumb = "include/doc-thumbnail.php?doc=$doc";
 echo("\n<div class=\"thumbnail\">\n<td class=\"center\"><a class=\"lightbox\" title=\"$shortname\" href=\"$thumb&dpi=96\"><img class=\"lazy\" data-href=\"$thumb\" src=\"images/blank.png\" width=\"50\" height=\"50\"/></a></td>\n</div>\n");

Notice that another plug-in is involved – lightbox so not sure if that affects the situation.

At the moment it looks like the JAIL plug-in is doing something but all the images are loaded as soon as the page has loaded.

The lightbox still works when you click on the thumbnails – the page actually works just the same as it did before except that before the page is fully loaded the thumbnail cell is empty.

Answer 1

I discovered what was wrong, the silliest of things!

Because I tried to use the original lazy load plug-in I had an existing rule in my CSS hiding images of class lazy so the plug-in wasn’t able to do it’s thing.

If anyone else runs into this problem that’s what to do!