Revision #21 has been created by wei on Oct 26, 2010, 2:40:48 AM with the memo:
formatting, removed missing images
« previous (#20)
How to use Highslide for image popups
<br>## About Highslide
[...]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.
* Create `blog/js` directory. Move `highslide` directory to `blog/js/` after unzipping the *highslide* package.
[...]<title><?php echo $this->pageTitle; ?></title>
* Add a line in `blog/css/main.css` to reset floating images.
#### (2) Extending Markdownparser
I have added a new grammer for ["Markdown syntax"](http://daringfireball.net/projects/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.
# (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`.
[...]Setting the value of 360 to 'imageBoundingbox' means 'imageBoundingboxWidth' = 'imageBoundingboxHeight' = 360.
# <a name="Example">Example</a>
Using this consists of simple steps; upload, post and click.
Upload your image using FCKEditor or other method to `blog/images`.
[...]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:<br>