I received a clients feature request but could not find the answer on these forums neither via google. The question was, is it possible to have the popup image on the category page instead of the product page.
It took me some time to figure it out but i succeeded.
I use version 1.5.2.1 and installed fancybox.
This is what you have to do:
Dowload fancybox from: https://github.com/fancyapps/fancyBox/zipball/v2.0.6
Unzip Fancybox and upload the whole directory to catalog/view/javascript/jquery
After uploading rename the "fancyapps..." dir to "fancybox"
Open catalog/controller/product/category.php in your favorite editor and go to line 101 and the following code:
Code: Select all
if ($category_info['image']) {
$this->data['popup'] = $this->model_tool_image->resize($category_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
} else {
$this->data['popup'] = '';
}Code: Select all
'popup' => $this->data['popup'] = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),Scroll to line 73 and replace the line starting with "<div class="image">" with the following:
Code: Select all
<div class="image"><a href="<?php echo $product['popup']; ?>" title="<?php echo $product['name']; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a></div>To get this all working fancybox needs to be enabled, so go ahead and open catalog/view/theme/default/template/common/header.tpl
Make sure you add the following items to the header:
Code: Select all
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="catalog/view/javascript/jquery/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script>
Now if everything went well you should be able to see popup images on the category page.
Note - this will work when you select the category list. i haven't tried it using product grid.
Good luck!
