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

Zencart产品图片预览切换

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

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

优缺点对比如下

优点:加强客户体验,网站丰富多彩。

缺点:不能与Image Handle融合实现缩略图功能(不用缩略图功能的可以无视)。

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

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


修改步骤:

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

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

 

在上面一行添加代码:

  1. function zen_image_info($src$alt = ''$width = ''$height = ''$parameters = '') {   
  2.     global $template_dir$zco_notifier;   
  3.   
  4.     // soft clean the alt tag   
  5.     $alt = zen_clean_html($alt);   
  6.   
  7.     // use old method on template images   
  8.     if (strstr($src, 'includes/templates') or strstr($src, 'includes/languages') or PROPORTIONAL_IMAGES_STATUS == '0') {   
  9.       return zen_image_OLD($src$alt$width$height$parameters);   
  10.     }   
  11.   
  12. //auto replace with defined missing image   
  13.     if ($src == DIR_WS_IMAGES and PRODUCTS_IMAGE_NO_IMAGE_STATUS == '1') {   
  14.       $src = DIR_WS_IMAGES . PRODUCTS_IMAGE_NO_IMAGE;   
  15.     }   
  16.   
  17.     if ( (emptyempty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {   
  18.       return false;   
  19.     }   
  20.   
  21.     // if not in current template switch to template_default   
  22.     if (!file_exists($src)) {   
  23.       $src = str_replace(DIR_WS_TEMPLATES . $template_dir, DIR_WS_TEMPLATES . 'template_default', $src);   
  24.     }   
  25.   
  26.     // hook for handle_image() function such as Image Handler etc   
  27.     if (function_exists('handle_image')) {   
  28.       $newimg = handle_image($src$alt$width$height$parameters);   
  29.       list($src$alt$width$height$parameters) = $newimg;   
  30.       $zco_notifier->notify('NOTIFY_HANDLE_IMAGE', array($newimg));   
  31.     }   
  32.   
  33.     // Convert width/height to int for proper validation.   
  34.     // intval() used to support compatibility with plugins like image-handler   
  35.     $width = emptyempty($width) ? $width : intval($width);   
  36.     $height = emptyempty($height) ? $height : intval($height);   
  37.   
  38. // alt is added to the img tag even if it is null to prevent browsers from outputting   
  39. // the image filename as default   
  40.     $image = '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';   
  41.   
  42.     if (zen_not_null($alt)) {   
  43.       $image .= ' title=" ' . zen_output_string($alt) . ' "';   
  44.     }   
  45.   
  46.     if ( ((CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (emptyempty($width) || emptyempty($height))) ) {   
  47.       if ($image_size = @getimagesize($src)) {   
  48.         if (emptyempty($width) && zen_not_null($height)) {   
  49.           $ratio = $height / $image_size[1];   
  50.           $width = $image_size[0] * $ratio;   
  51.         } elseif (zen_not_null($width) && emptyempty($height)) {   
  52.           $ratio = $width / $image_size[0];   
  53.           $height = $image_size[1] * $ratio;   
  54.         } elseif (emptyempty($width) && emptyempty($height)) {   
  55.           $width = $image_size[0];   
  56.           $height = $image_size[1];   
  57.         }   
  58.       } elseif (IMAGE_REQUIRED == 'false') {   
  59.         return false;   
  60.       }   
  61.     }   
  62.   
  63.   
  64.     if (zen_not_null($width) && zen_not_null($heightand file_exists($src)) {   
  65. //      $image .= ' width="' . zen_output_string($width) . '" height="' . zen_output_string($height) . '"';   
  66. // proportional images   
  67.       $image_size = @getimagesize($src);   
  68.       // fix division by zero error   
  69.       $ratio = ($image_size[0] != 0 ? $width / $image_size[0] : 1);   
  70.       if ($image_size[1]*$ratio > $height) {   
  71.         $ratio = $height / $image_size[1];   
  72.         $width = $image_size[0] * $ratio;   
  73.       } else {   
  74.         $height = $image_size[1] * $ratio;   
  75.       }   
  76. // only use proportional image when image is larger than proportional size   
  77.       if ($image_size[0] < $width and $image_size[1] < $height) {   
  78.         $image .= ' width="' . $image_size[0] . '" height="' . intval($image_size[1]) . '"';   
  79.       } else {   
  80.         $image .= ' width="' . round($width) . '" height="' . round($height) . '"';   
  81.       }   
  82.     } else {   
  83.        // override on missing image to allow for proportional and required/not required   
  84.       if (IMAGE_REQUIRED == 'false') {   
  85.         return false;   
  86.       } else if (substr($src, 0, 4) != 'http') {   
  87.         $image .= ' width="' . intval(SMALL_IMAGE_WIDTH) . '" height="' . intval(SMALL_IMAGE_HEIGHT) . '"';   
  88.       }   
  89.     }   
  90.   
  91.     // inject rollover class if one is defined. NOTE: This could end up with 2 "class" elements if $parameters contains "class" already.   
  92.     if (defined('IMAGE_ROLLOVER_CLASS') && IMAGE_ROLLOVER_CLASS != '') {   
  93.       $parameters .= (zen_not_null($parameters) ? ' ' : '') . 'class="rollover"';   
  94.     }   
  95.     // add $parameters to the tag output   
  96.     if (zen_not_null($parameters)) $image .= ' ' . $parameters;   
  97.   
  98.     $image .= ' />';   
  99.   
  100.     return $image;   
  101.   }  

 

2,在函数zen_image区域内搜索

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

 

替换成:

  1. //35EBS修改鼠标移到图片上显示另外一张图 start   
  2.     if (!file_exists(str_ireplace('.jpg','_1.jpg',$src))){    
  3.         $image = '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';   
  4.     }else{   
  5.         $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) . '"';   
  6.     }   
  7.     //35EBS修改鼠标移到图片上显示另外一张图 end  

3,找到文件includes/templates/你的模板/tpl_modules_main_product_image.php

搜索:zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT)

替换成:zen_image_info($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT)

4,修改完成了,去前台刷新一下看看效果吧。

注:步骤3是为了解决详细页面大图也切换图片,当然要改成不能切换的。


点击次数:431  发布日期:2014-05-22  【打印此页】  【关闭