在Ionize CMS框架实现多张图片即位放大预览

jtzmsqzr

目前网站上的图片放大，一般都是针对一张图片进行，也就是针对一张图片编程，页面上可能同时显示多张图片，当用户要放大某一图片时，首先要点击它，切换到支持放大该图片的网页，才能实现放大功能，完事才返回原来的页面，然后再选择、再放大。我们不妨称其为移位放大技术，需要增加来回切换的两步操作，并不是理想的用户体验。那么，能不能实现无需切换操作的多张图片即位放大呢？答案显然是肯定的，我们已经在国之瑰宝网站http://szgzgb.com/上，实现页面上的6张图片即位放大。其关键技术是，首先要实现对页面上显示的6张图片编程，同时还要解决当最后一页不足6张时，放大程序能够正常运行。相关技术分享如下：
1、生成支持6张图片放大显示的scaxy6.css文件，代码如下：
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
#smallbox1{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox1{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view1{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox2{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox2{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view2{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox3{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox3{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view3{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox4{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox4{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view4{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox5{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox5{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view5{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#smallbox6{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox6{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view6{border:1px #ddd solid;width:0px;height:0px;position:absolute}
2、生成支持6张图片放大显示的scaxy6.js文件（优化版见http://codeigniter.org.cn/forums/thread-12828-1-1.html），代码如下：
var border = 1; //边框
var srcX1 = 1024; //原图大小,可以任意设置
var srcY1 = 768;
var bigX1 = 300; //预览窗大小,可以任意设置
var bigY1 = 225;
var smallX1 = 300; //缩略图宽度
var smallY1 = srcY1 * smallX1 / srcX1;
var viewX1 = bigX1 / srcX1 * smallX1; //预览范围
var viewY1 = bigY1 / srcY1 * smallY1;
var bn1 = srcX1 / smallX1;//缩小比例
var srcX2 = 1024; //原图大小,可以任意设置
var srcY2 = 768;
var bigX2 = 300; //预览窗大小,可以任意设置
var bigY2 = 225;
var smallX2 = 300; //缩略图宽度
var smallY2 = srcY2 * smallX2 / srcX2;
var viewX2 = bigX2 / srcX2 * smallX2; //预览范围
var viewY2 = bigY2 / srcY2 * smallY2;
var bn2 = srcX2 / smallX2;//缩小比例

var srcX3 = 1024; //原图大小,可以任意设置
var srcY3 = 768;
var bigX3 = 300; //预览窗大小,可以任意设置
var bigY3 = 225;
var smallX3 = 300; //缩略图宽度
var smallY3 = srcY3 * smallX3 / srcX3;
var viewX3 = bigX3 / srcX3 * smallX3; //预览范围
var viewY3 = bigY3 / srcY3 * smallY3;
var bn3 = srcX3 / smallX3;//缩小比例
var srcX4 = 1024; //原图大小,可以任意设置
var srcY4 = 768;
var bigX4 = 300; //预览窗大小,可以任意设置
var bigY4 = 225;
var smallX4 = 300; //缩略图宽度
var smallY4 = srcY4 * smallX4 / srcX4;
var viewX4 = bigX4 / srcX4 * smallX4; //预览范围
var viewY4 = bigY4 / srcY4 * smallY4;
var bn4 = srcX4 / smallX4;//缩小比例
var srcX5 = 1024; //原图大小,可以任意设置
var srcY5 = 768;
var bigX5 = 300; //预览窗大小,可以任意设置
var bigY5 = 225;
var smallX5 = 300; //缩略图宽度
var smallY5 = srcY5 * smallX5 / srcX5;
var viewX5 = bigX5 / srcX5 * smallX5; //预览范围
var viewY5 = bigY5 / srcY5 * smallY5;
var bn5 = srcX5 / smallX5;//缩小比例
var srcX6 = 1024; //原图大小,可以任意设置
var srcY6 = 768;
var bigX6 = 300; //预览窗大小,可以任意设置
var bigY6 = 225;
var smallX6 = 300; //缩略图宽度
var smallY6 = srcY6 * smallX6 / srcX6;
var viewX6 = bigX6 / srcX6 * smallX6; //预览范围
var viewY6 = bigY6 / srcY6 * smallY6;
var bn6 = srcX6 / smallX6;//缩小比例
window.onload=function (){
smallpic1.width=smallX1;
smallpic1.height=smallY1;
bigpic1.width=srcX1;
bigpic1.height=srcY1;
view1.style.width=viewX1;
view1.style.height=viewY1;
smallbox1.style.borderWidth=border;
bigbox1.style.borderWidth=border;
smallpic2.width=smallX2;
smallpic2.height=smallY2;
bigpic2.width=srcX2;
bigpic2.height=srcY2;
view2.style.width=viewX2;
view2.style.height=viewY2;
smallbox2.style.borderWidth=border;
bigbox2.style.borderWidth=border;

smallpic3.width=smallX3;
smallpic3.height=smallY3;
bigpic3.width=srcX3;
bigpic3.height=srcY3;
view3.style.width=viewX3;
view3.style.height=viewY3;
smallbox3.style.borderWidth=border;
bigbox3.style.borderWidth=border;
smallpic4.width=smallX4;
smallpic4.height=smallY4;
bigpic4.width=srcX4;
bigpic4.height=srcY4;
view4.style.width=viewX4;
view4.style.height=viewY4;
smallbox4.style.borderWidth=border;
bigbox4.style.borderWidth=border;
smallpic5.width=smallX5;
smallpic5.height=smallY5;
bigpic5.width=srcX5;
bigpic5.height=srcY5;
view5.style.width=viewX5;
view5.style.height=viewY5;
smallbox5.style.borderWidth=border;
bigbox5.style.borderWidth=border;
smallpic6.width=smallX6;
smallpic6.height=smallY6;
bigpic6.width=srcX6;
bigpic6.height=srcY6;
view6.style.width=viewX6;
view6.style.height=viewY6;
smallbox6.style.borderWidth=border;
bigbox6.style.borderWidth=border;

if (window.event){
smallbox1.style.width=smallpic1.offsetWidth+border*2;
smallbox1.style.height=smallpic1.offsetHeight+border*2;
bigbox1.style.width=bigX1+border*2;
bigbox1.style.height=bigY1+border*2;
smallbox2.style.width=smallpic2.offsetWidth+border*2;
smallbox2.style.height=smallpic2.offsetHeight+border*2;
bigbox2.style.width=bigX2+border*2;
bigbox2.style.height=bigY2+border*2;

smallbox3.style.width=smallpic3.offsetWidth+border*2;
smallbox3.style.height=smallpic3.offsetHeight+border*2;
bigbox3.style.width=bigX3+border*2;
bigbox3.style.height=bigY3+border*2;
smallbox4.style.width=smallpic4.offsetWidth+border*2;
smallbox4.style.height=smallpic4.offsetHeight+border*2;
bigbox4.style.width=bigX4+border*2;
bigbox4.style.height=bigY4+border*2;
smallbox5.style.width=smallpic5.offsetWidth+border*2;
smallbox5.style.height=smallpic5.offsetHeight+border*2;
bigbox5.style.width=bigX5+border*2;
bigbox5.style.height=bigY5+border*2;
smallbox6.style.width=smallpic6.offsetWidth+border*2;
smallbox6.style.height=smallpic6.offsetHeight+border*2;
bigbox6.style.width=bigX6+border*2;
bigbox6.style.height=bigY6+border*2;
}

}
function move(e){
    var ele=e.srcElement.id;
    var viewX=viewX1;
    var viewY=viewY1;
    var bigpico=bigpico1;
    var view=view1;
    var bn=bn1;
    switch (ele) {
        case "smallpic1":
            viewX=viewX1;
            viewY=viewY1;
            bigpico=bigpico1;
            view=view1;
            bn=bn1;
            break;
        case "smallpic2":
            viewX=viewX2;
            viewY=viewY2;
            bigpico=bigpico2;
            view=view2;
            bn=bn2;
            break;
        case "smallpic3":
            viewX=viewX3;
            viewY=viewY3;
            bigpico=bigpico3;
            view=view3;
            bn=bn3;
            break;
        case "smallpic4":
            viewX=viewX4;
            viewY=viewY4;
            bigpico=bigpico4;
            view=view4;
            bn=bn4;
            break;
        case "smallpic5":
            viewX=viewX5;
            viewY=viewY5;
            bigpico=bigpico5;
            view=view5;
            bn=bn5;
            break;
        case "smallpic6":
            viewX=viewX6;
            viewY=viewY6;
            bigpico=bigpico6;
            view=view6;
            bn=bn6;
            break;

    }
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX =  e.offsetX - viewX/2;
var vY =  e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
bigpico.style.marginLeft = - vX * bn
bigpico.style.marginTop = - vY * bn
view.style.left = e.x - viewX/2;
view.style.top = e.y - viewY/2;
}
3、在放大图片的文件头header.php包含以上2个文件：
<link rel="stylesheet" type="text/css" href="<ion:theme_url />enlarge/scaxy6.css" />
<script type="text/javascript" src="<ion:theme_url />enlarge/scaxy6.js"></script>
4、放大图片的php文件开始代码如下：
<ion:partial view="header" />
<!-- Home Content -->
        <!-- Page's subtitle -->
        <h2 class="title"><ion:subtitle /></h2>
        <!-- Home page articles
                 Loop into articles without linked view : Article's fields are directly displayed
        -->
<?php $articles = '0' ?>
        <ion:articles  type="">
  <?php $articles = '<ion:index />'; ?>
                <div class="span-33 home ">
                        <!-- We display only one picture of each article
                                 So, even the editor makes a mistake by linking 2 pictures, the website design will stay correct
                        -->
                        <ion:medias type="picture" limit="1">
                                <div class="imgborder" >
<div class="img" style="width:300 height:225px;">
<div id="smallbox<?php echo $articles; ?>"><a href='/themes/zjtz/enlarge/enlargejpg.php?arg=<ion:src folder="940" /> '>
<img src="<ion:src folder="940" />" id="smallpic<?php echo $articles; ?>"  onmousemove="move(event)"/>
</a></div>

<div id="bigbox<?php echo $articles; ?>"  style="display:none">
<div id="bigpico<?php echo $articles; ?>"><img src="<ion:src folder="940" />" id="bigpic<?php echo $articles; ?>"></div>
</div>
<div id="view<?php echo $articles; ?>"style="display:none"></div>
</div>
                                </div>
                        </ion:medias>
                        <h2><ion:title /></h2>
                        
                        <!-- Article's content -->
                        <ion:content />
                        
                </div>
               
        </ion:articles>
5、为了保证当最后一页不足6张图片时，放大程序能够正常运行，页面的php程序必须能够自动生成相应的放大图片对象的代码，故在以上代码末尾添加（优化版见http://codeigniter.org.cn/forums/thread-12828-1-1.html）：
<?php if($articles < 6): ?>
<div  style="display:none">
<?php
$A=1 + $articles;
$M=6;   
for ($i=$A; $i<=$M; $i++)
{
?>
<div id="smallbox<?php echo $i; ?>"><img src="" id="smallpic<?php echo $i; ?>" /></div>
<div id="bigbox<?php echo $i; ?>" >
<div id="bigpico<?php echo $i; ?>"><img src="" id="bigpic<?php echo $i; ?>" /></div>
</div>
<div id="view<?php echo $i; ?>" style="display:none"></div>
<?php }
?>

</div>
<?php endif; ?>
真不好意思，以上代码太长，格式也很凌乱。代码太长是为了能够充分共享，格式凌乱的部分系本人所为，其他整齐部分均为Ionize CMS框架的代码，谨请谅解！

Hex

楼主可以加一下代码高亮就不乱了，呵呵