Love Highslide? So do we. We’ve even written a manual on how to install and use Highslide in Magento. We’ve used it on the Product-pages to display product-images but it can easily be extended to display images in your CMS-pages, frontpage, etc. Ok, lock the door and watch closely.

Step 1: Download the latest version of Highslide
Click here to go to the Highslide.com-site and download the latest (stable) version to your local computer.

Step 2: Transfer Highslide to your Magento-installation
Unzip the Highslide and transfer the files to your Magento skin-folder, for example:

/skin/frontend/default//highslide

You should now have a bunch of .js-files, a few .css-files and a ‘graphics’-folder in this ‘highslide’-folder.

Step 3: Add code to the head-area to get the Highslide loaded up

Open your /app/design/frontend/default/

/template/page/html/head.phtml-file and add the following code at the end (this code will appear in the head-area, above the body):

<!-- Initiate Highslide -->
<script src="&lt;?php echo $this-" type="text/javascript"><!--mce:0--></script>
 
<script type="text/javascript"><!--mce:1--></script>

Step 4: Replace the default product-image magnifier with Highslide

Ok so, this is the most advanced step so pay close attention. Navigate to your frontend template-folder (normally /app/design/frontend/default//template). Now browse further in the directory-tree to the catalog-folder, then the product-folder and finally – the view-folder. You should be somewhere around here:

/app/design/frontend/default//template/catalog/product/view

The files in this folder are very critical to have Magento working so watch your steps closely. The first thing we’ll do is to make a backup of the media.phtml-file which we are going to modify by transferring a copy of it to a secret place your local computer. If you want to revert back to the original product-image magnifier its good to have a backup somewhere. You can even replace it with the very popular MagicZoom Plus-extension which can be bought as an optional addon with all our Magento themes.

Next, open up the media.phtml-file on your server and.. well, we’ve done everything for you in this step, so just replace everything in the file with the following code:

<!-- Fetch product-image information -->
getProduct();
    $_helper = $this-&gt;helper('catalog/output');
?&gt;
 
<!-- Check if Base image is defined, and if so, display it with Highslide effect -->
getImage() != 'no_selection' &amp;&amp; $_product-&gt;getImage()): ?&gt;
<div class="highslide-gallery">
    <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image') ?&gt;">
        <img title="Click to enlarge" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image')-&gt;resize(265) ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($this-&gt;getImageLabel()) ?&gt;" />
    </a>
    <!-- Add caption below the image -->
<div class="highslide-caption">
        htmlEscape($this-&gt;getImageLabel()) ?&gt;</div>
</div>
<!-- No Base image available. Will show default image from Magento -->
 
<!-- Hey, this product has more images so we'll display the gallery and Highslide them as well -->
getGalleryImages()) &gt; 0): ?&gt;
<div class="more-views">
<div class="highslide-gallery">
<h4>__('More Views') ?&gt;</h4>
<ul>
    getGalleryImages() as $_image): ?&gt;
	<li>
            <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'image', $_image-&gt;getFile()); ?&gt;">
            <img title="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile())-&gt;resize(56); ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" /></a>
<div class="highslide-caption">
            htmlEscape($_image-&gt;getLabel()) ?&gt;</div></li>
</ul>
</div>
</div>
<!-- End of media.phtml with Highslide-effect -->

Step 5: Finish

You’re done. Thats right. Good job!
Or what do you say? You dont want to do it yourself? Then just purchase one of our popular Magento-themes and add Highslide as a bundled addon upon purchase, and we’ll help you all the way through.

Wanna see a demo of it?

Check out our products at Silverthemes.com, as they’re all set up with the Highslide:
http://www.silverthemes.com/premium-magento-themes/superclean.html