zencart_magiczoom

mod_zencart_magiczoom使用

 
一、复制相应文件到相应目录。

二、安装sql文件。

三、按照正确命名上传商品图片,一般需要中图跟大图。

四、程序运行时会在images目录下创建magicthumbs目录,并根据商品图片,每个商品自动生成两张图片用于前台显示
,生成图片的尺寸可以在后台设置,前台也可以用CSS控制显示。

五、中图输出模板在文件magiczoom.module.core.class.php中大约130行处修改。

六、去掉顶部标题,修改文件magiczoom.module.core.class.php,去掉$title变量:

 

return "<a{$link} class=\"MagicZoom\"{$title} id=\"MagicZoomImage{$id}\" ,删除红色字体。
 
 

zencart 产品图片分析

 

数据库存放格式

数据表中只保留一个字段存储图片信息,保存从根目录下images目录为起点的路径名(不包含images),如a.jpg,a/b.jpg,以下称为原图。

中图和大图存放位置及命名格式

中图与大图分别位于images/medium和images/large,图片名为原图片名加中图后缀或大图后缀,如a_mid.jpg,a_lag.jpg

附加图片存放位置及命名格式

附加图片跟原图片相同目录,原图如果在images目录下,则附加图片命名格式为原图名加任意字符(后缀必须一样),原图如果在images下的子目录下,则附加图片命名格式为原图名加下划线加任意字符,同样,后缀名必须一样。
附加图中图大图位于images/medium和images/large下,目录结枸必须和原图一样,命名格式为附加图名加中图后缀或大图后缀。
取出原图中图、大图路径
复制代码
$products_image_extension = substr($products_image, strrpos($products_image, '.'));
$products_image_base = str_replace($products_image_extension, '', $products_image);
$products_image_medium = $products_image_base . IMAGE_SUFFIX_MEDIUM . $products_image_extension;
$products_image_large = $products_image_base . IMAGE_SUFFIX_LARGE . $products_image_extension;

if (!file_exists(DIR_WS_IMAGES . 'medium/' . $products_image_medium)) {
  
$products_image_medium = DIR_WS_IMAGES . $products_image;
else {
  
$products_image_medium = DIR_WS_IMAGES . 'medium/' . $products_image_medium;
}

if (!file_exists(DIR_WS_IMAGES . 'large/' . $products_image_large)) {
  
if (!file_exists(DIR_WS_IMAGES . 'medium/' . $products_image_medium)) {
    
$products_image_large = DIR_WS_IMAGES . $products_image;
  } 
else {
    
$products_image_large = DIR_WS_IMAGES . 'medium/' . $products_image_medium;
  }
else {
  
$products_image_large = DIR_WS_IMAGES . 'large/' . $products_image_large;
}
复制代码

取出附加图片及相应中图大图路径

复制代码
$images_array = array();
if ($products_image != '') {
  
$products_image_extension = substr($products_image, strrpos($products_image, '.'));
  
$products_image_base = str_replace($products_image_extension, '', $products_image);

  
if (strrpos($products_image, '/')) {
    
$products_image_match = substr($products_image, strrpos($products_image, '/')+1);
    
$products_image_match = str_replace($products_image_extension, '', $products_image_match. '_';
    
$products_image_base = $products_image_match;
  }

  
$products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
  
if ($products_image_directory != '') {
    
$products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image. "/";
  } 
else {
    
$products_image_directory = DIR_WS_IMAGES;
  }

  
if ($dir = @dir($products_image_directory)) {
    
while ($file = $dir->read()) {
      
if (!is_dir($products_image_directory . $file)) {
        
if (substr($file, strrpos($file, '.')) == $products_image_extension) {
          
if(preg_match("/" . $products_image_base . "/i", $file== 1) {
            
if ($file != $products_image) {
              
if ($products_image_base . str_replace($products_image_base, '', $file== $file) {
                
$images_array[] = $file;
              } 
else {

              }
            }
          }
        }
      }
    }
    
if (sizeof($images_array)) {
      
sort($images_array);
    }
    
$dir->close();
  }
}

$num_images = sizeof($images_array);
$output_addtional_image_list = array();

if ($num_images) {
  
for ($i=0, $n=$num_images$i<$n$i++) {
    
$file = $images_array[$i];
      
$products_image_medium = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'medium/', $products_image_directory. str_replace($products_image_extension, '', $file. IMAGE_SUFFIX_MEDIUM . $products_image_extension;
    
if(file_exists($products_image_medium)){
        
$products_image_medium = $products_image_medium;
    }
else{
        
$products_image_medium = $products_image_directory . $file;
    }    
    
$products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory. str_replace($products_image_extension, '', $file. IMAGE_SUFFIX_LARGE . $products_image_extension;
    
if(file_exists($products_image_large)){
        
$products_image_large = $products_image_large;
    }
else{
        
$products_image_large = $products_image_directory . $file;
    }
    
$output_addtional_image_list[$i]['base_image'= $products_image_directory . $file;
    
$output_addtional_image_list[$i]['medium_image'= $products_image_large;
    
$output_addtional_image_list[$i]['large_image'= $products_image_large;
  }
}
复制代码
 

Magic Zoom 使用说明

 

引入主要文件

<link type="text/css" rel="stylesheet" href="magiczoom.css"/>
<script type="text/javascript" src="magiczoom.js"></script>

结构

  单图片结构(中图+大图)
  <a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>
  (其中class="MagicZoom"为关键项)

  多图片结构(小图+中图+大图)
  主图:<a href="dbig.jpg" class="MagicZoom" id="rabbit"><img src="small.jpg"></a>
  附加图:<a href="addimg_big.jpg" rel="zoom-id:rabbit" rev="addimg_mid.jpg"><img src="addimg_small.jpg"/></a>
      <a href="addimg2_big.jpg" rel="zoom-id:rabbit" rev="addimg2_mid.jpg"><img src="addimg2_small.jpg"/></a>
      (为主图添加id属性,附加图添加rev指向中图,通过rel="zoom-id:rabbit"确立联系)

参数设置

为rel属性设置参数列表,如
<a href="big.jpg" class="MagicZoom" rel="zoom-width:118px; zoom-height:118px"><img src="small.jpg"/></a>

特例:自定义显示框位置
<a href="big.jpg" class="MagicZoom" id="elephant" rel="zoom-position: custom><img src="small.jpg"/></a>
<div id="elephant-big"></div>

样式设置

在magiczoom.css添加自定义样式

设置显示框样式
.MagicZoomBigImageCont {
border: none;
}
设置抓图区样式
.MagicZoomPup {
border: 2px solid #658EC2;
background: #658EC2 url(dotted.png);
cursor: move;
}

参数列表

ParameterDefaultOptionsDescription
Geometry
zoom-width 300   Width of zoom window (px)
zoom-height 300   Height of zoom window (px)
zoom-position right left / right / top / bottom / inner /custom Position of zoom window
zoom-distance 15   Distance from small image to zoom window (px)
User experience
opacity 50 0-100 Opacity of hovered area
opacity-reverse false true / false Add opacity outside mouse box
smoothing true true / false Enable smooth zoom movement
smoothing-speed 40 1-99 Speed of smoothing
fps 25   Frames per second for zoom effect
show-title top top / bottom / false Show the title of the image in the zoom window
zoom-fade false true / false Zoom window fade effect
zoom-fade-in-speed 400   Zoom window fade-in speed (ms)
zoom-fade-out-speed 200   Zoom window fade-out speed (ms)
Multiple images
thumb-change click click / mouseover Multiple images change on click/mouseover
selectors-mouseover-delay 200   Delay before switching thumbnails (ms)
selectors-effect dissolve dissolve / fade / false Dissolve or cross fade thumbnails
selectors-effect-speed 400   Speed of dissolve/fade effect (ms)
preload-selectors-small true true / false Multiple images, preload small images
preload-selectors-big false true / false Multiple images, preload large images
Initialization
click-to-initialize false true / false Click to fetch the large image
click-to-activate false true / false Click to show the zoom
show-loading true true / false Loading message
loading-msg Loading zoom...   Loading message text
loading-opacity 75 0-100 Loading message opacity
loading-position-x -1   Loading message X-axis position, -1 is center
loading-position-y -1   Loading message Y-axis position, -1 is center
Zoom mode
drag-mode false true / false Click and drag to move the zoom
move-on-click true true / false Click to move the zoom (in drag mode)
preserve-position false true / false Remember position of zoom for multiple images and drag mode
x -1   Initial X-axis position for drag mode, -1 is center
y -1   Initial Y-axis position for drag mode, -1 is center
always-show-zoom false true / false Make zoom window always visible. (Automatically true in drag-mode.)
fit-zoom-window true true / false Resize zoom window if big image is smaller than zoom window
entire-image false true / false Show the entire large image on hover
posted @ 2013-11-15 10:17  也许明天  阅读(430)  评论(1编辑  收藏  举报