How to use Highslide for image popups

About Highslide ¶

You can download the highslide javascript from http://highslide.com/. And here is an explanation on that URL;

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.

• No plugins like Flash or Java required.
• Popup blockers are no problem. The content expands within the active browser window.
• Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
• Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

Tutorial for "Blog Demo" ¶

I am going to explain to embed highslide in the "blog demo" as this is a well known example.

Installation of highslide ¶

You only have three steps to do.

(1) Javascript & CSS installation ¶

• Create blog/js directory. Move highslide directory to blog/js/ after unzipping the highslide package.

• Download highslide_eh.js and copy it under blog/js/highslide/.

• Add reference codes for these javascript and css file before the title line in blog/protected/views/layouts/main.php as follows.

- <?php echo CHtml::cssFile(Yii::app()->baseUrl.'/css/main.css'); ?>
+ <?php
+ $cs=Yii::app()->clientScript;
+ $cs->registerCSSFile(Yii::app()->request->baseUrl.'/css/main.css');
+ $cs->registerCSSFile(Yii::app()->request->baseUrl.'/js/highslide/highslide.css');
+ $cs->registerCoreScript('jquery');
+ $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/highslide/highslide.js', CClientScript::POS_HEAD);
+ $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/highslide/highslide_eh.js', CClientScript::POS_HEAD);
+ $script = 'hs.graphicsDir = \''.Yii::app()->request->baseUrl.'/js/highslide/graphics/\';'."\n";
+ $script .= 'hs.outlineType = \'rounded-white\';'."\n";
+ $script .= 'hs.showCredits = false;';
+ $cs->registerScript('hislide-par', $script, CClientScript::POS_BEGIN);
+ $script = 'addHighSlideAttribute();';
+ $cs->registerScript('hislide-att', $script, CClientScript::POS_END);
+ ?>
<title><?php echo $this->pageTitle; ?></title>

If you would like to compress these javascript and css files, consider to use ExtendedClientScript.

• Add a line in blog/css/main.css to reset floating images.

.post .nav
{
    -moz-border-radius:7px;
    padding: 5px;
    background: #F5F5F5;
+   clear:left;
}

(2) Extending Markdownparser ¶

I have added a new grammer for "Markdown syntax" to extend the exsisting CMarkdownParser. This is because I do not want to affect an ordinary image reference. New grammer for highslide is as follows.

*[image](reference)

• Download this extended MarkdownParserHighslide.php, and place it to blog/protected/extensions/.

You have to autoload this extension using following enabler in the configuration file.

• Add following line to blog/protected/config/main.php.

'import'=>array(
          'application.models.*',
          'application.components.*',
+         'application.extensions.*',

• Replace CMarkdownParser to MarkdownParserHighslide in the two files of blog/protected/models/Comment.php and blog/protected/models/Post.php as follows.

protected function beforeValidate($on)
        {
-             $parser=new CMarkdownParser;
+             $parser=new MarkdownParserHighslide;

(3) Configuration ¶

• Configure the image directory and bounding box in blog/protected/config/params.php. I asume there is a directory named images just under the blog.

'copyrightInfo'=>'Copyright © 2009 by My Company.',
+       // configurations for highslide extension
+       'imageHome'=>'images/',
+       'imageHomeAbs'=>dirname(__FILE__).'/../../images/',
+       'imageBoundingbox'=>'240',        
+        'imageParams'=>'style="float:left;margin:5px;"',
  );

You may set the value to 'imageBoundingboxWidth' and/or 'imageBoundingboxHeight' respectively. Setting the value of 360 to 'imageBoundingbox' means 'imageBoundingboxWidth' = 'imageBoundingboxHeight' = 360.

Example ¶

Using this consists of simple steps; upload, post and click. Upload your image using FCKEditor or other method to blog/images. Then create a post including following line, just like usual reference to the image.

*[name](fileName)

Images are scaled down within the bounding box you have configured in the config file. Then, they pop up in the actual size when you click them.