首页 >> E商学院 >> zencart百科 >> Zencart产品图片预览切换

Zencart产品图片预览切换

功能介绍：打开zencart网站的时候，当鼠标放到一个产品图片上的时候显示该产品的另外一张图片，当鼠标移走的时候，显示为原始的图片。

实现原理：利用产品的细节图，鼠标移上去改变图片路径，路径变为细节图的第一张图。

优缺点对比如下：

优点：加强客户体验，网站丰富多彩。

缺点：不能与Image Handle融合实现缩略图功能（不用缩略图功能的可以无视）。

建议：产品图片不能太大，不然当鼠标放在产品图片的时候要1.5秒~2.5秒的时间图片才能切换。

演示效果预览：http://demo.tempvv.com/zonghe002/

修改步骤：

1，找到文件includes/functions/html_output.php ，搜索

function zen_image($src, $alt = '', $width = '', $height = '', $parameters = '') {

在上面一行添加代码：

function zen_image_info($src, $alt = '', $width = '', $height = '', $parameters = '') {
global $template_dir, $zco_notifier;
// soft clean the alt tag
$alt = zen_clean_html($alt);
// use old method on template images
if (strstr($src, 'includes/templates') or strstr($src, 'includes/languages') or PROPORTIONAL_IMAGES_STATUS == '0') {
return zen_image_OLD($src, $alt, $width, $height, $parameters);
}
//auto replace with defined missing image
if ($src == DIR_WS_IMAGES and PRODUCTS_IMAGE_NO_IMAGE_STATUS == '1') {
$src = DIR_WS_IMAGES . PRODUCTS_IMAGE_NO_IMAGE;
}
if ( (emptyempty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
return false;
}
// if not in current template switch to template_default
if (!file_exists($src)) {
$src = str_replace(DIR_WS_TEMPLATES . $template_dir, DIR_WS_TEMPLATES . 'template_default', $src);
}
// hook for handle_image() function such as Image Handler etc
if (function_exists('handle_image')) {
$newimg = handle_image($src, $alt, $width, $height, $parameters);
list($src, $alt, $width, $height, $parameters) = $newimg;
$zco_notifier->notify('NOTIFY_HANDLE_IMAGE', array($newimg));
}
// Convert width/height to int for proper validation.
// intval() used to support compatibility with plugins like image-handler
$width = emptyempty($width) ? $width : intval($width);
$height = emptyempty($height) ? $height : intval($height);
// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
$image = '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';
if (zen_not_null($alt)) {
$image .= ' title=" ' . zen_output_string($alt) . ' "';
}
if ( ((CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (emptyempty($width) || emptyempty($height))) ) {
if ($image_size = @getimagesize($src)) {
if (emptyempty($width) && zen_not_null($height)) {
$ratio = $height / $image_size[1];
$width = $image_size[0] * $ratio;
} elseif (zen_not_null($width) && emptyempty($height)) {
$ratio = $width / $image_size[0];
$height = $image_size[1] * $ratio;
} elseif (emptyempty($width) && emptyempty($height)) {
$width = $image_size[0];
$height = $image_size[1];
}
} elseif (IMAGE_REQUIRED == 'false') {
return false;
}
}
if (zen_not_null($width) && zen_not_null($height) and file_exists($src)) {
// $image .= ' width="' . zen_output_string($width) . '" height="' . zen_output_string($height) . '"';
// proportional images
$image_size = @getimagesize($src);
// fix division by zero error
$ratio = ($image_size[0] != 0 ? $width / $image_size[0] : 1);
if ($image_size[1]*$ratio > $height) {
$ratio = $height / $image_size[1];
$width = $image_size[0] * $ratio;
} else {
$height = $image_size[1] * $ratio;
}
// only use proportional image when image is larger than proportional size
if ($image_size[0] < $width and $image_size[1] < $height) {
$image .= ' width="' . $image_size[0] . '" height="' . intval($image_size[1]) . '"';
} else {
$image .= ' width="' . round($width) . '" height="' . round($height) . '"';
}
} else {
// override on missing image to allow for proportional and required/not required
if (IMAGE_REQUIRED == 'false') {
return false;
} else if (substr($src, 0, 4) != 'http') {
$image .= ' width="' . intval(SMALL_IMAGE_WIDTH) . '" height="' . intval(SMALL_IMAGE_HEIGHT) . '"';
}
}
// inject rollover class if one is defined. NOTE: This could end up with 2 "class" elements if $parameters contains "class" already.
if (defined('IMAGE_ROLLOVER_CLASS') && IMAGE_ROLLOVER_CLASS != '') {
$parameters .= (zen_not_null($parameters) ? ' ' : '') . 'class="rollover"';
}
// add $parameters to the tag output
if (zen_not_null($parameters)) $image .= ' ' . $parameters;
$image .= ' />';
return $image;
}

2，在函数zen_image区域内搜索

$image = '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';

替换成：

//35EBS修改鼠标移到图片上显示另外一张图 start
if (!file_exists(str_ireplace('.jpg','_1.jpg',$src))){
$image = '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';
}else{
$image = '<img src="' . zen_output_string($src) . '" onMouseOver="this.src='.'\''.str_ireplace('.jpg','_1.jpg',zen_output_string($src)).'\''.'" onMouseOut="this.src='.'\''.zen_output_string($src).'\''.'" alt="' . zen_output_string($alt) . '"';
}
//35EBS修改鼠标移到图片上显示另外一张图 end