Lightroom Helper

By Julian Phillip Sander aka "drswank"
This is a simple helper for people who want to use the lightbox.js
This is a helper for people using lightbox.js. Lightbox.js is available here: http://www.huddletogether.com/projects/lightbox2/.

There are 2 methods in this class:
Download code
$lightbox->img();
$lightbox->txt();


img() is for placing images as in a picture gallery.
txt() is for placing text links to images.

here is the code:

Helper Class:

Download code <?php 
<?php  
class LightboxHelper extends AppHelper 
    
    var 
$tags = array(    'img'=>'<a href="%s" rel="lightbox[%s]" title="%s"><img src="%s" %s %s/></a>',
                        
'txt'=>'<a href="%s" rel="lightbox[%s]" title="%s" %s>%s</a>');

    
/**
     * @public
     * 
     * @param    $tn:String      a relative or absolute path to the thumbnail image
     * @param    $lg:String         a relative or absolute path to the large image to be shown
     * @param    $title:String     a title for the caption as well as the alt text
     * @param    $group:String    a group name if images are to be put into groups (see lightbox docs for more info)
     * @param    $tn_att:Array    an array of html attributes for the thumbnail image
     * 
     * @returns a formated <a href></a> tag
     */
    
function img($tn,$lg,$title,$group='',$tn_att=array()) {

        
$title htmlspecialchars($titleENT_QUOTES);
        return 
$this->output(sprintf($this->tags['img'], $this->_image($lg), $group$title$this->_image($tn), $this->_parseAttributes($tn_attnull''' '),' alt="'.$title.'"'));
        
    }
    
    
/**
     * @public
     * 
     * @param    $txt:String      the text for the link that goes between the <a> and the </a>
     * @param    $lg:String         a relative or absolute path to the large image to be shown
     * @param    $title:String     a title for the caption as well as the alt text
     * @param    $group:String    a group name if images are to be put into groups (see lightbox docs for more info)
     * @param    $class_att:Array an array of html attributes for the text link like "class"=>"myLBClass"
     * 
     * @returns    a formated <a href></a> tag 
     */
    
function txt($txt,$lg,$title,$group='',$class_att=array()) {

        
$title htmlspecialchars($titleENT_QUOTES);
        return 
$this->output(sprintf($this->tags['txt'], $this->_image($lg), $group$title,$this->_parseAttributes($class_attnull''' ') ,$txt));
        
    }
    
    
/**
     * @private
     * @param    $path:String    a string path to be parsed
     * @returns a url string
     */
    
function _image($path) {
        if (
strpos($path'://')||$path[0]=='/') {
            
$url $path;
        } else {
            
$url $this->webroot(IMAGES_URL $path);
        }
        return 
$url;
    }
}

?>
?>


drswank

Comments 542

CakePHP team comments Author comments

Comment

1 broken

this helper not working
the debuger gives a lots of errors
posted Thu, Dec 27th 2007, 08:54 by berdyk

Comment

2 How I got it to work....

Just a note that you need to be using one of the 1.2 betas for this to work since it uses AppHelper.

1)
Open: cake/libs/controller/pages_controller.php
And add the helper.

var $helpers = array('Html', 'Lightbox');


2)
Download lightbox and put all the .js files into your webroot/js directory, CSS file into the webroot/css directory, and all the images into the webroot/img directory.

3)
Download the code above (be sure to remove the extra php tags and put it into a file called lightbox.php and put that into your helper directory

4)
Now open the lightbox.js and change lines 65 and 66 to:

var fileLoadingImage = "../img/loading.gif";        
var fileBottomNavCloseImage = "../img/closelabel.gif";


5)
Lastly you need to link all the files so open the layout you are using and add:

<?php echo $html->css('lightbox'); ?>
<script type="text/javascript" src="<?php echo $this->webroot 'js/'?>prototype.js"></script>
<script type="text/javascript" src="<?php echo $this->webroot 'js/'?>scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo $this->webroot 'js/'?>lightbox.js"></script>


6)
Now in your view you can add something like:

<?php echo $lightbox->txt('Test Lightbox Image''aycom-logo.png''Here is my first test of lightbox''A'); ?>
<br />
<?php echo $lightbox->txt('Another Lightbox Image''cake.power.png''Here is my second test of lightbox''A'); ?>


I hope I didn't forget anything but let me know if I did.

------------------------------
AYCOM Consulting
http://www.aycomconsulting.com
posted Thu, Jan 3rd 2008, 20:26 by Ian

Comment

3 Loading and Close image

It might happen that you need to setup your app into a directory structure (like i have for development), when you have this situation you might notice that the images in the JS are not working:


var fileLoadingImage = "../img/loading.gif";
var fileBottomNavCloseImage = "../img/closelabel.gif";

You can change it to:

var fileLoadingImage = "img/loading.gif";
var fileBottomNavCloseImage = "img/closelabel.gif";

I'm not 100% sure if this works in all situations but so far this works in local/live/dirs situations for me.
posted Mon, Apr 21st 2008, 09:21 by Marius van Witzenburg

Login to Submit a Comment