When you are looking for fancy popping up pictures and even html pages or Flash movies in Joomla, many ways are possible. Most of you will know LightBox. But there is one I think really blows them all and that is HighSlide.
There is a commercial Joomla extension for that, but that is not what this Joomla Highslide Tutorial is about. Here I will show you what to do to get HighSlide running in Joomla:
First of all download Highslide here:
http://highslide.com/download.php
After you have downloaded it, you will need to add some code to your template's index.php and you will need to upload the files necessary for highslide.
In the folder you downloaded are samples, but also a folder called "highslide". Upload that entire "highslide" folder to (this is your own choice, but I like simplicity) media/system/js/
Once you have done that we are now ready to adjust the template index.php. Which you will be able to find in: Your Joomla root folder > templates > your template name > index.php open it up with your favorite html / php editor.
In your index.php you need to be sure you paste the following code between the <head> and </head> tags.
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/media/system/js/highslide/highslide-full.packed.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>/media/system/js/highslide/highslide.css" />
<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
    hs.graphicsDir = '<?php echo $this->baseurl; ?>/media/system/js/highslide/graphics/';
    hs.outlineType = 'rounded-white';
    //hs.wrapperClassName = 'draggable-header';
   Â
</script>
Since highslide has so many different settings and configurations, be sure to check the samples that come with the download and change the settings to your likings in the part mentioned here under 2) Optionally override...
Save your index.php file. Now your Joomla site is ready to work with HighSlide and you can use the HighSlide codes to get pictures, Flash Movies, html pages and much more to show in HighSlide format.
I can't tell you enough times, be sure to check the examples folder that comes with the download and the source code of the sample pages on how to use the HighSlide codes.
A few samples would be:
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html' } )"
class="highslide">
HTML content
<div class="highslide-html-content" id="highslide-html">
<div class="highslide-header">
<ul>
<li class="highslide-move">
[url=#" onclick="return false]Move[/url]
</li>
<li class="highslide-close">
[url=#" onclick="return hs.close(this)]Close[/url]
</li>
</ul>
</div>
<div class="highslide-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
When you browse through this forum and also on pages in the website, you will be able to see we make extensive use of HighSlide in our Joomla site and PHPBB3 forum. We really like the Joomla HighSlide features in our site, we hope you do too!
