zencart_magiczoom
mod_zencart_magiczoom使用
二、安装sql文件。
三、按照正确命名上传商品图片,一般需要中图跟大图。
四、程序运行时会在images目录下创建magicthumbs目录,并根据商品图片,每个商品自动生成两张图片用于前台显示
,生成图片的尺寸可以在后台设置,前台也可以用CSS控制显示。
五、中图输出模板在文件magiczoom.module.core.class.php中大约130行处修改。
六、去掉顶部标题,修改文件magiczoom.module.core.class.php,去掉$title变量:
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, '/')+);
$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) == ) {
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=, $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;
}
参数列表
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 |
zencart_magiczoom的更多相关文章
随机推荐
- OS X快捷键最最齐全版(官方版)
看大家不时的都在将系统发快捷键最新版,在官网上其实就有这个最详细的信息,为了方便大家.另外系统快捷键不会更新那么快,也就不存在最新版了.小弟现将原文转发过来,希望对新入门或需要的小伙伴有帮助.OS X ...
- 用tomcat6自定义域名
第一步:tomcat配置 修改server.xml文件 8080端口 更改为 80端口 并在<Host name="localhost" appBase="web ...
- Hibernate Tools for Eclipse安装
声明:本文转载自 http://developer.51cto.com/art/200906/128067.htm Hibernate Tools for Eclipse Plugins 的安装和使用 ...
- AVFoundation(一)---AVAudioPlayer
AVAudioPlayer相当于一个播放器,它支持多种音频格式,而且能够进行进度.音量.播放速度等控制. 下边通过代码来看一下,它的属性和常用方法(具体说明都写在了注释中): //AVAudioPla ...
- sql server中单引号拼接字符串(书写错误会出现错误"浮点值 XXXX 超出了计算机表示范围(8 个字节)。“XX”附近有语法错误。")
" ' "(单引号)的运用:在sql server中,两个" ' "(单引号)在拼接字符串的情况下运用,就是表示拼接上了一个" ' "单引号 ...
- 软件设计模式详解:OCP原则
看到两篇关于OCP的文章, 纳之. 原文: http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html http://blog. ...
- Struts2 请求数据的自动封装 及 自定义转换器类
请求数据自动封装: 实现原理:使用了参数拦截器.struts-default.xml中 <interceptor name="params" class="com. ...
- 用PHP实现验证码功能
目前,不少网站为了防止用户利用机器人自动注册.登录.灌水,都采用了 验证码技术.所谓验证码,就是将一串随机产生的数字或符号,生成一幅图片, 图片里加上一些干扰象素(防止OCR),由用户肉眼识别其中的验 ...
- WebKit框架 浅析
摘要 WebKit是iOS8之后引入的专门负责处理网页视图的框架,其比UIWebView更加强大,性能也更优. iOS中WebKit框架应用与解析 一.引言 在iOS8之前,在应用中嵌入网页通常需要使 ...
- Android实现播放GIF动画的强大ImageView
我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力.确实,比起一张单调的图片,动态图片明显更加的有意思.一般动态图片都是GIF格式的,浏览 ...