HOWTO: Install HighSlide in Magento

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/<your_theme>/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/<your_theme>/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 type="text/javascript" src="<?php echo $this->helper('core/js')->getJsSkinUrl('')?>highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->helper('core/js')->getJsSkinUrl('')?>highslide/highslide.css" />

<script type="text/javascript">
    hs.graphicsDir = '<?php echo $this->helper('core/js')->getJsSkinUrl('')?>highslide/graphics/';
    hs.showCredits = true;
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    //hs.dimmingOpacity = 0.75;

    // Add the controlbar
    hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 3000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
        opacity: .75,
        position: 'bottom center',
        hideOnMouseOut: true
        }
    });
</script>

<!-- END Highslide -->

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/<your_theme>/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/<your_theme>/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:

<?php
/**
 * Highslide product-magnifier extension for Magento
 * Written by Roy Andre Tollefsen
 * Copyright (c) 2009 Silverthemes.com (http://www.silverthemes.com)
 * Visit www.highslide.com for more information about Highslide
 */
?>

<!-- Fetch product-image information -->
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>

<!-- Check if Base image is defined, and if so, display it with Highslide effect -->
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<div class="highslide-gallery">
    <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" class="highslide" onclick="return hs.expand(this)">
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265) ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>"
            title="Click to enlarge" />
    </a>
    <!-- Add caption below the image -->
    <div class="highslide-caption">
        <?php echo $this->htmlEscape($this->getImageLabel()) ?>
    </div>
</div>

<!-- No Base image available. Will show default image from Magento -->
<?php else: ?>
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image')
    ?>
<?php endif; ?>

<!-- Hey, this product has more images so we'll display the gallery and Highslide them as well -->
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <div class="highslide-gallery">
    <h4><?php echo $this->__('More Views') ?></h4>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?> 
        <li>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" class="highslide" onclick="return hs.expand(this)">
            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>       
        <div class="highslide-caption">
            <?php echo $this->htmlEscape($_image->getLabel()) ?>
        </div>           
       </li>
    <?php endforeach; ?>  
    </ul>
    </div>
</div>

<?php endif; ?>

<!-- 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