Next, you need to upload all files in the ‘highslide’-folder inside the ZIP archive over to your Magento folder, but do it in the following way:
- Copy the highslide.css- and highslide-ie6.css files to your skin/frontend/polar/
- Copy the graphics-folder with all its content to your skin/frontend/polar/
/css/ folder (so that there gets a folder called ‘graphics’ inside the CSS folder)
- Copy the highslide-full.js file to your skin/frontend/polar/
/js/ folder (you can use the highslide-full.min.js as an alternative if you like to keep things as lightweighted as possible)
Now when all files are in place you need to do some minor customization on your Magento theme files.
First we need to make sure the new JS- and CSS-files we have uploaded are being loaded in Magento. Since we will only be using the Highslide on the product page we only need to load them when someone access the product page (you might want to load them on all pages if you want to run a JS- and CSS merge, and if you plan on using Highslide on other parts of the site than the product page).
So, open up your app/design/frontend/polar/
<catalog_product_view> <reference name="head"> <action method="addItem"><type>skin_js</type><name>js/highslide/highslide-full.js</name></action> <action method="addCss"><stylesheet>css/highslide.css</stylesheet></action> </reference> </catalog_product_view>
Finally we need to mess up the media.phtml template a little bit, which is the template file controlling the product images part of the product page. This file is normally not included in the theme, and so it needs to be copied from the base/default-folder. In other words, copy the app/design/frontend/base/default/template/catalog/product/view/media.phtml file over to your app/design/frontend/polar/
Open it up in your favourite editor and add the following content on the top of it:
Next, find the div called “product-image” and replace it with the following:
<div class="highslide-gallery product-image"> <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(590) ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>" title="Click to enlarge" /> </a> </div> </div>
Now the main product page should have a Highslide popup, but we want to do the same thing with the gallery as some products might have several product images.
Look up the class called “more-views” and replace it with the following:
<div class="more-views"> <div class="highslide-gallery"> <ul> <?php foreach ($this->getGalleryImages() as $_image): ?> <li> <div class="highslide-caption"> <?php echo $this->htmlEscape($_image->getLabel()) ?> </div> <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(350,280); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()$ </li> <?php endforeach; ?> </ul> </div> </div>
Thats it! You now have a perfect image magnifier for your store!