NYCPHP Meetup

[Gary Mort]

On 8/7/2011 11:53 PM, John Campbell wrote:
> On Fri, Aug 5, 2011 at 6:39 PM, Gary Mort<garyamort at gmail.com>  wrote:
>> One thing I'd like to see this for is to re-write all those cool lightbox
>> style javascript codes into PHP code[so instead of the user waiting for all
>> the HTML to download, then waiting for a javascript event to trigger to
>> update the links from their old links to popup links if they have the
>> appropriate class  - the server can pre-process the file and do those
>> substitutions once and then cache the data.]
> This sounds like premature optimization to me.  How can you make a
> lightbox with PHP code?

Just to recap how lightbox style scripts work:

1) You take a link to an image, and add an attribute to the link, such 
as rel="lightbox[mygallery]"

2) After the entire page is loaded, an onDomReady event is fired which 
find all href links with a rel attribute of lightbox[x] where x is some 
text.  The javascript code will then check to see if there is a 
thumbnail for the image[by checking for the same image name in a 
subdirectory called thumbs - if so, it changes the innerHTML to an img 
tag pointing to the thumbnail and sets the alt attribute for the 
thumbnail to the original text for the link.

3) Lightbox adds an event listener so that all clicks on any links in 
the page will now check to see if there is a rel=lightbox[x] attribute 
and if so, it aborts the normal click processing and instead sends it to 
the lightbox processing function instead to popup the lightbox.

Step 2 is entire client side processing which could be done by the 
server instead - ie the server could search the dom, find all those 
links, insert the thumbnail image directly and add an onClick even 
directly to the link.

Because of the way this is done, there are a number of problems this 
will cause in an application for slow connections or overloaded systems:

1) Users click on the links before the page finishes loading, this 
causes the page load to abort as the browser now goes to load just the 
image and users wonder why they can't see the product or add it to the cart.

2) Because the link is displayed as text and then swapped for a 
thumbnail, if the page does not finish loading poorly choosen text 
chosen to create on hover picture capturing is displayed as a link to 
the user causing confusion.

3) In complex CMS and Ecommerce systems, if there is a javascript error 
caused by some other module, the browser may abort processing all future 
javascript onDomReady events - so the lightbox enabling event may never 
be run.

Note: there are a large number of lightbox style javascript modules 
which use different attribute's and processes, they all do basically the 
same thing though and have the same type of potential problems.

There is no reason that when a PHP script generates HTML it should only 
go halfway in generating a functional page, and then send partially 
functional garbage to the web client and count on the web client to turn 
that garbage into a functional web page.  Without decent DOM 
manipulation it is easier to allow the client to make these changes.  
However, with PHP 5 and all the advances in PHP dom manipulation - it's 
now possible to send actually usable html code to a client and not count 
on javascript to convert it for you.

-Gary