This entry was posted on Monday, June 11th, 2007 at 8:20 PM and is filed under Programming, Software, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
If you’ve never heard of Lightbox or Lightbox 2, it is an extremely sexy way to display images within a web site. And, I should clear this up. You’re not actually displaying images within a web site, but rather on top of the web site.
Lightbox and Lightbox 2, hereafter referred to as simply Lightbox, uses some nifty CSS markup and JavaScriptto display a transparent overlay on top of the current page being viewed within the browser and then displays the image/photo in a nifty little box on top of that. With Lightbox, you don’t have to be worried about images pushing the limits of your sites design, i.e. column widths, when displaying images or photos.
Lightbox is extremely simple to install and implement. However, I was unable to find any documentation on how to get Lightbox incorporated into my CakePHP framework (for more information on CakePHP, read this or visit www.cakephp.org). I have used Lightbox in a project for my day job before but not when using the CakePHP framework and I had to do some messing around before I got this working. Probably only because I don’t fully understand the CakePHP framework and all of its helpers.
In CakePHP, it is extremely easy to link CSS and JavaScript files into your site’s layout. These types of files have to be included within the <head> and </head> tags of the HTML that is sent to the browser. If you follow the CakePHP standards for file locations, you would drop your CSS files into /app/webroot/css/ and your JavaScript files into /app/webroot/js/. Once your files are located in these locations, you add one line of code for each respective file type you want to link, like so:
CSS:
<php echo $html->css ( "myCssFile.css", "stylesheet", NULL, FALSE ); ?>
JavaScript:
<php
if ( isset ( $javascript ) ):
echo $javascript-$gt;link ("myJsFile.js" );
endif;
?>
Easy enough, right?! Well, sure. Just add the following lines of code to your site’s layout in /app/views/layouts/ and you’re good to go… mostly…
<php
echo $html->css ( "lightbox", "stylesheet", NULL, FALSE ); ?>;
if ( isset ( $javascript ) ):
echo $javascript-$gt;link ("prototype.js" );
echo $javascript-$gt;link ("scriptaculous.js" );
echo $javascript-$gt;link ("lightbox.js" );
endif;
?>
The above lines of code assume you’re using Lightbox 2 and you have placed the necessary files into the recommended folders within the CakePHP file system. The newest version of Lightbox has some display effects that are derived from the Prototype and Scriptaculous libraries. Therefore, you have to include those files as well. Please note that if you aren’t going to be using any of the other features available from the Scriptaculous library, append ?load=effects after scriptaculous.js in the above code.
You also need to make sure that any paths to images in the CSS and JavaScript files point to the correct location of the images included in the Lightbox download.
So, everything is great, right?! I should just be able to put rel="lightbox" in my <a> tags and when I click the link to go to an image, Lightbox should take over and help a brother out, right?! No! I had to add the JavaScript helper to my controller within CakePHP and then I was good to go! To do this, add the following line of code to your controller:
var $helpers = array ( "Javascript" );
If you are already specifying $helpers within your controller, just append:
, "Javascript"
…to the end of your helper strings you have defined like so:
var $helpers = array ( "Html", "Ajax", "Javascript" );
Like I said earlier, if I had a better understanding of CakePHP and which helpers were included by default (I know, I know, I should have looked at the pages controller…), I probably wouldn’t have had to mess with this. But, if anyone else out there is a CakePHP newbie like myself and wants to use Lightbox, or any other external JavaScript file, this should get you pointed in the right direction.
Until next time…
Bookmark to:
7 Responses to “Using Lightbox with CakePHP”
Leave a Reply
Flickr Updates
June 24th, 2007 at 4:30 AM
If you need to add the Javascript helper to all of your controllers, you can add them to a app_controller.php file in the app directory:
Since all the controllers inherit from this class, it will inherit the inclusion of any helpers you specify in it. Saves you from having to chase up every controller. You can still specify additional helpers in each individual controller.
FromJune 24th, 2007 at 4:31 AM
Oops, my php was stripped out, so here it is:
class AppController extends Controller
{
var $helpers = array(’Javascript’);
(+ other functions you might want in all controllers such as session checking, etc)
}
FromJune 24th, 2007 at 12:02 PM
Thanks for the heads up, Ryan. I will definitely use this inclusion of JavaScript in the
app_controller.phpfile. I am working on another site that needs JavaScript included in every page due to some mouse over image swapping. This will help a lot.Thanks again!
Jeff
FromJune 25th, 2007 at 5:48 AM
I’m starting learning CakePHP too, I found same problem with AJAX. When I tried to use AJAX functions CakePHP displayed an error “Unable to use $javascript”.
After reading some documentation, I saw the “helpers” solution. It’s easy to develope under CakePHP, but I must learn a lot.
FromJune 25th, 2007 at 7:40 AM
Yeah, same here, r0sk. There is a lot to learn. Hopefully, I will be there some day!
Jeff
FromOctober 6th, 2008 at 12:40 AM
I have a last question: Where have you placed the image folder of Lightbox2 ?
FromOctober 6th, 2008 at 9:26 AM
I placed the images in the webroot/img folder in their own subfolder, but you have to modify the JavaScript and CSS files to point to their location.
From