Add Highslide to 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//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 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

 =

 false

;




    hs.align

 =

 'center'

;




    hs.transitions

 =

 [

'expand'

,

 'crossfade'

]

;




    hs.outlineType

 =

 'rounded-white'

;




    hs.fadeInOut

 =

 true

;




    //hs.dimmingOpacity = 0.75;




 


    // 11c3bce867cc0baf47f1bb002e14f0e5




 


    // Add the controlbar




    hs.addSlideshow

(

{




        //slideshowGroup: 'group1',




        interval:

 3000

,




        repeat:

 false

,




        useControls:

 true

,




        fixedControls:

 'fit'

,




        overlayOptions:

 {




        opacity:

 .75,




        position:

 'bottom center'

,




        hideOnMouseOut:

 true




        }




    }

)

;




</

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:

<?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" οnclick="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" οnclick="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