How to use Highslide for image popups

You are viewing revision #21 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#20)

  1. About Highslide
  2. Tutorial for "Blog Demo"
  3. Installation of highslide
  4. Example

About Highslide

You can download the highslide javascript from 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
      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 ~~~

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

  • Add following line to blog/protected/config/main.php.
+         '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 &copy; 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.


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.