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;}
参数列表
ParameterDefaultOptionsDescriptionGeometryzoom-width300 Width of zoom window (px)zoom-height300 Height of zoom window (px)zoom-positionrightleft / right / top / bottom / inner /customPosition of zoom windowzoom-distance15 Distance from small image to zoom window (px)User experienceopacity500-100Opacity of hovered areaopacity-reversefalsetrue / falseAdd opacity outside mouse boxsmoothingtruetrue / falseEnable smooth zoom movementsmoothing-speed401-99Speed of smoothingfps25 Frames per second for zoom effectshow-titletoptop / bottom / falseShow the title of the image in the zoom windowzoom-fadefalsetrue / falseZoom window fade effectzoom-fade-in-speed400 Zoom window fade-in speed (ms)zoom-fade-out-speed200 Zoom window fade-out speed (ms)Multiple imagesthumb-changeclickclick / mouseoverMultiple images change on click/mouseoverselectors-mouseover-delay200 Delay before switching thumbnails (ms)selectors-effectdissolvedissolve / fade / falseDissolve or cross fade thumbnailsselectors-effect-speed400 Speed of dissolve/fade effect (ms)preload-selectors-smalltruetrue / falseMultiple images, preload small imagespreload-selectors-bigfalsetrue / falseMultiple images, preload large imagesInitializationclick-to-initializefalsetrue / falseClick to fetch the large imageclick-to-activatefalsetrue / falseClick to show the zoomshow-loadingtruetrue / falseLoading messageloading-msgLoading zoom... Loading message textloading-opacity750-100Loading message opacityloading-position-x-1 Loading message X-axis position, -1 is centerloading-position-y-1 Loading message Y-axis position, -1 is centerZoom modedrag-modefalsetrue / falseClick and drag to move the zoommove-on-clicktruetrue / falseClick to move the zoom (in drag mode)preserve-positionfalsetrue / falseRemember position of zoom for multiple images and drag modex-1 Initial X-axis position for drag mode, -1 is centery-1 Initial Y-axis position for drag mode, -1 is centeralways-show-zoomfalsetrue / falseMake zoom window always visible. (Automatically true in drag-mode.)fit-zoom-windowtruetrue / falseResize zoom window if big image is smaller than zoom windowentire-imagefalsetrue / falseShow the entire large image on hover
转载于:https://www.cnblogs.com/alex-13/p/3424808.html
相关资源：easy_populate_csv_for_zencart_v1.5.x_v1.2.6.4
