Lightroom Helper
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
img() is for placing images as in a picture gallery.
txt() is for placing text links to images.
here is the code:
drswank
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($title, ENT_QUOTES);
return $this->output(sprintf($this->tags['img'], $this->_image($lg), $group, $title, $this->_image($tn), $this->_parseAttributes($tn_att, null, '', ' '),' 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($title, ENT_QUOTES);
return $this->output(sprintf($this->tags['txt'], $this->_image($lg), $group, $title,$this->_parseAttributes($class_att, null, '', ' ') ,$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
Comment
1 broken
the debuger gives a lots of errors
Comment
2 How I got it to work....
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
Comment
3 Loading and Close image
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.