opencart添加放大图效果,产品详细页小图切换

opencart添加放大图效果
第一步:http://www.professorcloud.com/mainsite/cloud-zoom.htm
下载这个放大图插件
第二步:放到对应的文件夹下面
js放在\catalog\view\javascript这个目录下
css放在\catalog\view\theme\default\stylesheet这个目录下
然后开始修改文件
1,修改:catalog/view/theme/default/template/common/header.tpl
找到:
<link rel=”stylesheet” type=”text/css” href=”catalog/view/theme/default/stylesheet/stylesheet.css” />
在这个之后引入css:
<link href=”catalog/view/theme/default/stylesheet/cloud-zoom.css” rel=”stylesheet” type=”text/css” />
找到这里
<script type=”text/javascript” src=”catalog/view/javascript/common.js”></script>
在这个之后,引入js,建议先引用cloud-zoom.1.0.2.js,因为min的是压缩的,看不到代码,等下要改,所以先用这个,等你改好,再压缩
<script type=”text/JavaScript” src=”catalog/view/javascript/cloud-zoom.1.0.2.js”></script>
2,修改catalog/view/theme/default/template/product/product.tpl
a/ 找到这个:
<div><a href=”<?php echo $popup; ?>” title=”<?php echo $heading_title; ?>” rel=”fancybox”><img src=”<?php echo $thumb; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” id=”image” /></a></div>

b/ 替换成这个:
<div><a href=”<?php echo $popup; ?>” title=”<?php echo $heading_title; ?>” class = ‘cloud-zoom’ id=’zoom1′ rel=”position: ‘inside’ ,showTitle: false, adjustX:-4, adjustY:-4″ ><img src=”<?php echo $thumb; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” /></a></div>

c/ 找到这个:
<div class=”image-additional”>

d/ 在这个后面添加:
<a href=”<?php echo $popup; ?>” title=”<?php echo $heading_title; ?>” class = ‘cloud-zoom-gallery’ rel=”useZoom: ‘zoom1’, smallImage: ‘<?php echo $thumb; ?>’ “><img src=”<?php echo $small; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” /></a>

e/ 找到这个:
<a href=”<?php echo $image[‘popup’]; ?>” title=”<?php echo $heading_title; ?>” rel=”fancybox”><img src=”<?php echo $image[‘thumb’]; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” /></a>

f/ 替换成这个:
<a href=”<?php echo $image[‘popup’]; ?>” title=”<?php echo $heading_title; ?>” rel=”useZoom: ‘zoom1’, smallImage: ‘<?php echo $image[‘thumb’]; ?>’ “><img src=”<?php echo $image[‘small’]; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” /></a>

3,修改catalog/controller/product/product.php
a/找到这个:
$this->data[‘images’] = array();

b/在他前面添加:
if ($product_info[‘image’]) {
                $this->data[‘small’] = $this->model_tool_image->resize($product_info[‘image’], $this->config->get(‘config_image_additional_width’), $this->config->get(‘config_image_additional_height’));
            } else {
                $this->data[‘small’] = ”;
            }

c/ 找到这个:
‘popup’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_popup_width’), $this->config->get(‘config_image_popup_height’)),
‘thumb’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_additional_width’), $this->config->get(‘config_image_additional_height’))

d/ 替换成这个:
‘popup’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_popup_width’), $this->config->get(‘config_image_popup_height’)),
‘thumb’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_thumb_width’), $this->config->get(‘config_image_thumb_height’)),
‘small’ => $this->model_tool_image->resize($result[‘image’], $this->config->get(‘config_image_additional_width’), $this->config->get(‘config_image_additional_height’))