DX Image Box

DX Image Box is a Croogo plugin for lightbox. Based on the Fancybox script it provides a simple integration with your Croogo install.

For further instructions beyond this documentation, please refer to either Croogo help kit or Fancybox instructions.

Installation

• Download the zip file with the plugin from the repo here
• Extract it in your app/plugins directory (next to the example, tinymce and other plugins)
• Go to your admin dashboard -> plugins section
• Activate DX Image Box

Integration for developers

• Add the plugin (4 steps above)
• Go to your app_controller.php (or another single controller which will handle your lightbox behavior)
• Add to your helpers 'Dximagebox.Dximagebox' (name of the plugin and name of the helper)
• Go to your default.ctp layout (or any single view that needs to define rules for lightbox)
• Add the snippet for dximagebox initialization (more on this on the next step)

Options for snippet adding in layout/view

You could add a default call to your layout:

<?php echo $dximagebox->lightMe(); ?>

This would init the fancybox script all around your active visible area.

lightMe() function accepts jQuery selectors so that you could point what exactly to be boxed. By default DX Image Box uses 'body a:has(img)' which interprets as "All links pointing to an image in the body tag", i.e. all linked images. Another demo to box all links in the .node-body class (which is the content of a Croogo post):

<?php echo $dximagebox->lightMe('.node-body a'); ?>

Keep in mind that this will catch also links not pointing to an image (they have lightbox effects too). For images linked only use:

<?php echo $dximagebox->lightMe('.node-body a:has(img)'); ?>

Documentation for users

As pointed above, this script adds a lightbox functionality to images. So what a client has to do is:

• Go to admin panel and create a new page/post
• Insert an image with the TinyMCE editor (image could be resized there and so on)
• Click on the image in the editor area, select it and click the link button in the editor (the one as a chain)
• Add a link address for that image

Keep in mind that this allows you to add a thumbnail of one image and link it to another image. Nice, huh?