jQuery Lightbox with jQuery

It’s quite difficult to copy-paste JavaScript for same thing again and again. That’s why I’ve come up with Thickbox helper for CakePHP – as a result of a project which involved lot of thickboxes implementations. For those who don’t know what it is be sure to check Thickbox jQuery Plugin.

To use it, just include this helper in your controller and Its implementation is very simple:

1. For inline content:

PHP:
  1. <?
  2. $thickbox->setProperties(array(‘id’=>‘domId’, ‘height’=>‘300’, ‘width’=>‘334’)); // set height, width and DOM ID
  3. $thickbox->setPreviewContent(‘click me’); // the link which will trigger thickbox on click
  4. $thickbox->setMainContent(‘<div>see it??</div>’); // the content which will be shown in thickbox
  5. echo $thickbox->output();
  6. ?>

 

2. For AJAX:

PHP:
  1. $thickbox->setProperties(array(‘id’=>‘domId’,‘type’=>‘ajax’,‘ajaxUrl’=>‘/controller/action’));
  2. $thickbox->setPreviewContent(“Click me to see thickbox”);
  3. echo $thickbox->output();

Here’s the helper:

PHP:
  1. <?php
  2. class ThickboxHelper extends AppHelper {
  3.  
  4.     var $helpers = array(‘Javascript’, ‘Html’);
  5.    
  6.     /**
  7.      * Set properties – DOM ID, Height and Width, Type of thickbox window – inline or ajax
  8.      *
  9.      * @param array $options
  10.      */
  11.     function setProperties($options = array())
  12.     {
  13.         if(!isset($options[‘type’]))
  14.         {
  15.             $options[‘type’] = ‘inline’;
  16.         }
  17.         $this->options = $options;
  18.     }
  19.    
  20.     function setPreviewContent($content)
  21.     {
  22.         $this->options[‘previewContent’] = $content;
  23.     }
  24.  
  25.     function setMainContent($content)
  26.     {
  27.         $this->options[‘mainContent’] = $content;
  28.     }
  29.    
  30.     function reset()
  31.     {
  32.         $this->options = array();
  33.     }
  34.    
  35.     function output()
  36.     {
  37.         extract($this->options);
  38.         if($type==‘inline’)
  39.         {
  40.             $href = ‘#TB_inline?’;
  41.             $href .= ‘&inlineId=’.$id;
  42.         }
  43.         elseif($type==‘ajax’)
  44.         {
  45.             $ajaxUrl = $this->Html->url($ajaxUrl);
  46.             $href = $ajaxUrl.‘?’;
  47.         }
  48.                
  49.         if(isset($height))
  50.         {
  51.             $href .= ‘&height=’.$height;
  52.         }
  53.         if(isset($width))
  54.         {
  55.             $href .= ‘&width=’.$width;
  56.         }
  57.        
  58.        
  59.         $output = ‘<a class=”thickbox” href=”‘.$href.‘”>’.$previewContent.‘</a>’;
  60.        
  61.         if($type==‘inline’)
  62.         {
  63.             $output .= ‘<div id=”‘.$id.‘” style=”display:none;”>’.$mainContent.‘</div>’;
  64.         }
  65.        
  66.         unset($this->options);
  67.        
  68.         return $output;
  69.     }
  70.    
  71.     function beforeRender()
  72.     {
  73.         $out = $this->Html->css(‘/effects/css/thickbox.css’).‘<script src=”‘.$this->Html->url(‘/effects/js/thickbox-compressed.js’).‘”></script>’;
  74.         $view =& ClassRegistry::getObject(‘view’);
  75.         $view->addScript($out);
  76.     }
  77.  
  78. }
  79. ?>

 

You’ll need to copy the thickbox files to /app/webroot/effects. You can keep it in any folder for that matter, but as our team is following plugins – it’s made that way.