Difference between #19 and #21 of
How to use Highslide for image popups

Changes

Title unchanged

How to use Highslide for image popups

Category unchanged

Tutorials

Yii version unchanged

Tags changed

image, popups

Content changed

<br>
 
## About Highslide
You can download the *highslide* javascript from [http://highslide.com/](http://highslide.com/). And here is an explanation on that URL;
[...]
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.
[...]
<title><?php echo $this->pageTitle; ?></title>
```

 
If you would like to compress these javascript and css files, consider to use [ExtendedClientScript](http://www.yiiframework.com/extension/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"](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.

### Example<a name="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.
 
 
![post](http://www.yiiframework.com/forum/index.php?action=dlattach;topic=835.0;attach=161;image)
 
 
After clicking the picture:<br>
 
![popup](http://www.yiiframework.com/forum/index.php?action=dlattach;topic=835.0;attach=163;image)
 
 
 
1 0
2 followers
Viewed: 28 600 times
Version: 1.1
Category: Tutorials
Tags: image, popups
Written by: mocapapa
Last updated by: wei
Created on: Feb 17, 2009
Last updated: 14 years ago
Update Article
Revert to #19 | Revert to #21

Revisions

View all history