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 src="<?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->helper('catalog/output');
?>
<!-- Check if Base image is defined, and if so, display it with Highslide effect -->
getImage() != 'no_selection' && $_product->getImage()): ?>
<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this)" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
<img title="Click to enlarge" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265) ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>" />
</a>
<!-- Add caption below the image -->
<div class="highslide-caption">
htmlEscape($this->getImageLabel()) ?></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()) > 0): ?>
<div class="more-views">
<div class="highslide-gallery">
<h4>__('More Views') ?></h4>
<ul>
getGalleryImages() as $_image): ?>
<li>
<a class="highslide" onclick="return hs.expand(this)" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>">
<img title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
<div class="highslide-caption">
htmlEscape($_image->getLabel()) ?></div></li>
</ul>
</div>
</div>
<!-- End of media.phtml with Highslide-effect -->
Step 5: Finish
You’re done.
I followed all the steps along with putting it in the proper template folder. In the end it did not work on the hellowired theme.
ReplyDeleteWhere my main picture views is suppose to be i see the code instead on the latest release of magento 1.4.1.0.
This is what i see instead of the image:
getProduct(); $_helper = $this->helper('catalog/output'); ?> getImage() != 'no_selection' && $_product->getImage()): ?>
htmlEscape($this->getImageLabel()) ?>
getGalleryImages()) > 0): ?>
__('More Views') ?>
getGalleryImages() as $_image): ?>
htmlEscape($_image->getLabel()) ?>.
I get the exact same thing!
ReplyDelete