zencart_magiczoom

最新推荐文章于 2024-09-21 13:09:33 发布

dianlei9877

最新推荐文章于 2024-09-21 13:09:33 发布

阅读量92

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/alex-13/p/3424808.html

版权

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 使用说明

引入主要文件

结构

　　单图片结构（中图+大图）
　　<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;
}

参数列表

Parameter	Default	Options	Description
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