I have a Magento client who wanted the Highslide javascript library integrated in several places on his store. Highslide itself is relatively straightforward to integrate & to customise – it really is an excellent javascript thumbnail viewer library (its actually a lot more than that) & is well documented, with an excellent support forum.
Where I came unstuck was that the client wanted a product popup on the product list page – where all the products are listed. In the popup he wanted the large product image, the title, price & ‘buy’ button.
The problem is that with Magento 1.3.2.4 you do not have access to the large product image on the products list page. So I initially developed an ajax call to load the product, its large image & other data, & used the highslide hs.htmlExpand() method to display it. I then encountered the problem that highslide hs.htmlExpand() method has a hard coded (in the css) width – so, while the popup expands to the height of the product, the width is fixed. So, I was having scroll bars on landscape images but portraits were fine. Not acceptable.
Hilde on the Highslide forum suggested I use the hs.expand() method, which takes its height & width from the image itself, and place the title, price, buy button in the “caption” (<div class=”highslide-caption”>) area that can be attached to the popup image. However, that brought me straight back to the original problem that Magento 1.3.2.4 does not make the large image available on the products list page!
However, searching the Magento forums I eventually came across the solution. In Magento, almost everything associated with a product (price, title, images, etc) is an “attribute”. Within the admin system you are able to edit the attributes of these attributes (is it searchable, should it be “used in product listing”!, etc) , but not the attributes of the product images!
However, looking at the table “eav_attributes” the main product image can be edited so that it is available on the products list page. You must change the default value of the field “used_in_product_listing” from 0 (false) to 1 (true). Of course, you should backup your database before changing anything like this & always do this on a test system first!
Once this change has been made, you can then access the large product image on the products listing page. Voila! Now I was able to use the hs.expand() method & could abandon my ajax workaround too.
The resulting code in ../template/catalog/products/list.phtml is as follows:
<!--bof photo-->
<div><a href="<?php echo ( $this->helper('catalog/image')->init($_product, 'image'));?>"title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'image')) ?>"onclick="return hs.expand(this, {showCredits:false, outlineType:'rounded-white',transitions:{ expand: true}, wrapperClassName: 'highslide-white-background', align:'center'})">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(200, 200) ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" style="text-align:left;" align="left" /></a>
<div class='highslide-caption'><?php echo( $_product->getName());?> <br /> <?php echo $_coreHelper->currency($_product->getPrice()) ?> <?php if ($_product->isSaleable()): ?> <button onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('add to basket') ?></span></button> <?php endif; ?></div>
</div><!-- eof photo -->
Remember, this is for Magento 1.3.2.4. However, it now means I have a product popup on the products listing page that takes the main product image and scales the popup to the image’s dimensions, without any scroll bars.