Using preg_replace to write image html with lightbox?

SaintIsaiah · 12-22-2009, 12:00 AM

A year or so ago I used preg_replace to grab some html for an image and rewrite it so it would have 'rel="lightbox"' in it to use lightbox. But I cant remember how to write it.

How would I write it to grab each <img /> tag to just include 'rel="lightbox"'after the src="".

basically transforming each...

Code:

<img src="urladdress" />

into this...

Code:

<img src="urladdress" rel="lightbox" />

I read the php.net page on preg_replace but I didn't understand.

Any help is appreciated!

delayedinsanity · 12-23-2009, 01:16 AM

php Code:

header( "Content-type: text/plain" );

function add_lightbox( $ret ) {
    return preg_replace( '~(<a[^>]+)>([^<]+</a>)~', '$1 rel="lightbox">$2', $ret );
}

echo add_lightbox( '<a href="http://domain.tld/test/">test</a>' );

Note that this does not check for the existence of an existing rel attribute - it only adds one. But it should get you started down the right path to figuring that out. ;)

adamdecaf · 12-23-2009, 01:30 AM

Just a site note: If you want to do this client side than something like this should work.

The advantage to using JavaScript is that you will save some processing time. It will still work because jQuery checks the element when it's clicked, so unless the user instantly clicks the image it (the page) may "load faster".

The downside is that older browsers will take a long time to process through a lot of image elements (10-15+).

javascript Code:

function set_lightboxes() {
   var image_elements = document.getElementsByTagName('img');
   var n, count = image_elements.length;

   for (n = 0; n < count; n++) {
      image_elements[n].rel = 'lightbox';
   }
   return;
}

window.onload = function () {
   set_lightboxes();
}