1. About Highslide
2. Tutorial for "Blog Demo"

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 ~~~

• 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 ~~~

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.

Here are the screen shots of this highslide enabled blog demo.

After clicking the picture: