Lightroom Helper
This is a simple helper for people who want to use the [b]lightbox.js[/b]
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:
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:
$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:
<?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
Are you sure, you include the scriptaculous and lightbox js files in webroot/js?
You need to include all this
echo $this->Html->css('lightbox');
echo $this->Javascript->link('prototype', 'false');
echo $this->Javascript->link('scriptaculous.js?load=effects', 'false');
echo $this->Javascript->link('lightbox', 'false');
Make sure you've attached the css and javascripts in the usual way then when you make a link put this:
View Template:
<?php echo $html->link(__("text", true), "url", array('rel' => 'lightbox')); ?>
You can even get it to work on images:
View Template:
<?php echo $html->link($html->image("image")), "url", array('rel' => 'lightbox'), null, false);
?>
Easy
var $helpers = array('Html', 'Javascript');
private $basePath = '/js/lightbox/';
private $jsPath = 'js/';
private $cssPath = 'css/';
function init() {
echo $this->Html->css($this->basePath . $this->cssPath . 'lightbox');
echo $this->Javascript->link($this->basePath . $this->jsPath . 'prototype', 'false');
echo $this->Javascript->link($this->basePath . $this->jsPath . 'scriptaculous.js?load=effects', 'false');
echo $this->Javascript->link($this->basePath . $this->jsPath . 'lightbox', 'false');
}
and add $this->basePath before IMAGES_URL.
$url = $this->webroot($this->basePath . IMAGES_URL . $path);
Now you just have to extract lightbox to /webroot/js/lightbox and don't have to move to all the directories. finally call init().
echo $lightbox->init();
like i said, i couldn't get it to work. maybe it's my changes, but i doubt it. i get a thumbnail when i call
echo $lightbox->img('/js/lightbox/images/thumb-1.jpg', '/js/lightbox/image-1.jpg', 'It works!');
My controller is "lightboxes_controller.php", as follows:
Controller Class:
<?php
<?php
class LightboxesController extends AppController {
var $name = 'Lightboxes';
var $uses = array();
var $helpers = array('Html', 'Javascript', 'Ajax', 'Lightbox');
function index() {
}
}
?>
?>
My view is "lightboxes/index.ctp", as follows:
View Template:
<?php echo $lightbox->txt('Test Lightbox Image', 'pope.jpg', 'Here is my first test of lightbox'); ?>
My layout is "layouts/default.ctp", as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title_for_layout?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<?php echo $html->css('ieStyle'); ?>
<?php echo $scripts_for_layout ?>
<?php
echo $html->css('lightbox', "stylesheet", NULL, FALSE);
echo $html->charsetTag('UTF-8');
echo $javascript->link('prototype.js');
echo $javascript->link('scriptaculous.js?load=effects');
echo $javascript->link('lightbox.js');
echo $javascript->link('builder.js');
?>
</head>
<body>
<?php echo $content_for_layout; ?>
</body>
</html>
Regarding the files that come with Lightbox 2, the JS files are all in my "webroot/js/" folder, and the css file is in my "webroot/css/" folder, and all the images are in my "webroot/img/" folder. I replaced the two lines in the "lightbox.js" file as follows:
var fileLoadingImage = "../img/loading.gif";
var fileBottomNavCloseImage = "../img/closelabel.gif";
I also added the file "/views/helpers/lightbox.php" and copied the code at the top of this tutorial, with the exception of the redundant tags (placing only one of each instead of 2).
I have no clue what's going wrong... can anyone help? :(
1 - As the above comment states, the builder include is crucial.
2 - You must remember to update the path to your images folder BOTH in the lightbox.js file AND the lightbox.css file. Not sure why they don't just restructure to put the paths in one location, but for now, you need to update both.
or it will not work (js error; 'Builder' not declared and the likes).
link('builder'); ?>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.
the debuger gives a lots of errors
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