Lightroom Helper (Articles) | The Bakery, Everything CakePHP

Lightroom Helper

By Julian Phillip Sander (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($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

CakePHP Team Comments Author Comments

Comment

1 broken

this helper not working
the debuger gives a lots of errors

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

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.

Comment

4 Remeber to include builder.js

Builder.js is in the lightbox-distribution, make sure you include that file too;
or it will not work (js error; 'Builder' not declared and the likes).


link('builder'); ?>

Comment

5 BUILDER!!! PREV/NEXT BUTTONS!!! These are important!

Sorry for the caps. Just realized the simplicity of the problem that was driving me crazy.

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.

Question

6 Question

Follow the steps in the tutorial "How I got it to work....", everything works, open the link to the images, but any effect appears, the image opens like a normal link. Someone had this kind of problem?

Question

7 Nothing happen

I follow the tuto too but like Jaon nothing happen... The link open the image in a blank page... someone have a solution!??

Bug

8 Nothing happens here either...

Like the 2 posters above me, I don't get the lightbox effect. No errors occur, but the clicking the image or text link just redirects my browser directly to the image URL.

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? :(

The Bakery Everything CakePHP