animate/expand images with jquery - can I change the direction in which it expands?
I've been working on a site here > http://dragonsoftwales.co.uk which sells DVDs of various obscure kinds (in return for some web-space to advertise my house). On the product pages there are pictures of the front cover of each item that expand to 2x the size on hover (using jquery.min.js & pic-expand.js), as well as producing a jquery pop-up of the rear cover when clicked (not relevant here).
The problem I have is that the expanded picture appears in a downward direction from the top-left of it's containing division. Can anybody suggest a method of over-riding the jquery script to enable the image to expand in an upward direction from the bottom-left of the division.
The two reasons being...
1. To prevent the image hiding behind the division below it I have to give incrementally higher z-index values to the divs above and it screws up the esthetics due to the box-shadow of each div overlapping the div below. To be able to reverse the z-index priorities would resolve this issue.
2. While the images expand downwardly they often disappear off-screen, especially the lowest one, which then has to be scrolled to reveal them. This is less likely to happen if the picture expands in an upward direction.
If there is an ammendment I can make to pic-expand.js to facilitate this, I would love to know about it.
Thanks for reading and any help would be appreciated.
If you only animate width and height, it will only expand to the right and the bottom. If you want to expand in other directions, you'll need to animate left and top additionally, so that the image moves to another position on screen.
Be careful, this will only work if the image has a "non-static" CSS position (relative, absolute, fixed)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<center>
<br />
<img class="mag Zoom:150 Group:egypt Mode:centerup ZoomDuration:500 ZoomSRC:http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
<img class="mag Zoom:150 Group:egypt Mode:centerup ZoomDuration:500 ZoomSRC:http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
</center>
<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image. (30-November-2011)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// Functional code size 3.29K
function zxcZoomImage(o){
var reg=new RegExp('\\b'+o.ClassName+'\\b'),els=document.getElementsByTagName('*'),obj,s,index,z0=0,z0a;
for (; z0<els.length;z0++){
if(reg.test(els[z0].className)){
obj={};
s=els[z0].className.split(' ');
for (z0a=0;z0a<s.length;z0a++){
index=s[z0a].indexOf(':');
if (index>2){
obj[s[z0a].substring(0,index).toLowerCase()]=s[z0a].substring(index+1);
}
}
new zxcZoomImageOOP(els[z0],o,obj);
}
}
}
function zxcZoomImageOOP(img,o,obj){
var oop=this,p=img.parentNode,w=img.width,h=img.height,zoom=obj.zoom||o.Zoom,zoom=isFinite(zoom)&&zoom>100?zoom/100:2,zw=w*zoom,zh=h*zoom,ms=obj.zoomduration||o.ZoomDuration,ms=isFinite(ms)?ms:1000,z=obj.zindex||o.ZIndex,z=isFinite(z)?z:101,etype=obj.eventtype||o.EventType,etype=typeof(etype)=='string'?etype.toLowerCase().replace('on',''):'',etype=etype=='mouseup'||etype=='mousedown'||etype=='click'?etype:'mouseover',close=etype!='mouseover',mde=obj.mode||o.Mode,grp=o.Group||obj.group,mde=typeof(mde)=='string'?mde.toLowerCase():'',zlft=mde=='downright'||mde=='upright'||mde=='centerright'?0:mde=='downleft'||mde=='upleft'||mde=='centerleft'?w-zw:(w-zw)/2,ztop=mde=='downright'||mde=='downleft'||mde=='centerdown'?0:mde=='upleft'||mde=='upright'||mde=='centerup'?h-zh:(h-zh)/2,clone=document.createElement('IMG');
clone.src=obj.zoomsrc||img.src;
clone.style.position='absolute';
clone.style.visibility='hidden';
clone.style.zIndex=z+'';
document.body.appendChild(clone);
this.ary=[img,clone,ms,['left',0,zlft,0],['top',0,ztop,0],['width',w,zw,w],['height',h,zh,h]];
this.z=z*1;
this.close=close;
if (close&&p.nodeName.toUpperCase()=='A'){
// img.parentNode.removeAttribute('href');
p.parentNode.insertBefore(img,p);
}
this.grp=grp;
this.ud=false;
this.addevt(img,etype,'zoom',true);
this.addevt(clone,etype=='mouseover'?'mouseout':etype,'zoom',false);
this.addevt(window,'resize','resize');
}
zxcZoomImageOOP.prototype={
zoom:function(ud){
clearTimeout(this.dly);
var ary=this.ary,pos=this.pos(ary[0]),grp=this.grp,lst=zxcZoomImage[grp],z0=3;
if (ud&&grp&&this.close,lst&&lst!=this&&lst.ud){
lst.zoom(false);
}
ary[1].style.visibility='visible';
ary[1].style.zIndex=this.z+(ud?1:0)+'';
for (;z0<7;z0++){
this.animate(ary[1],ary[z0][0],ud&&z0<5?pos[z0==3?0:1]:ary[z0][3],z0<5?pos[z0==3?0:1]+(ud?ary[z0][2]:0):ary[z0][ud?2:1],new Date(),ary[2],ary[z0]);
}
this.ud=ud;
if (grp){
zxcZoomImage[grp]=this;
}
},
resize:function(){
this.ary[1].style.visibility='hidden';
},
animate:function(obj,mde,f,t,srt,mS,ary){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
now=Math.max(now,f<0||t<0?now:0);
obj.style[mde]=now+'px';
ary[3]=now;
}
if (ms<mS){
setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,ary); },10);
}
else {
ary[3]=t;
obj.style[mde]=t+'px';
if (mde=='width'&&t==ary[1]){
obj.style.visibility='hidden';
obj.style.zIndex=this.z+'';
}
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
zxcZoomImage({
ClassName:'mag', // the common class name if the images to zoom. (string)
Mode:'center', //(optional) the mode of execution(see Note 2). (string, default = 'center')
Zoom:200, //(optional) the percentage zoom. (string, default = '200')
ZoomDuration:1000, //(optional) the zoom duration in milli seconds. (number, default = 1000)
ZIndex:101, //(optional) the z-Index of the zoom image. (number, default = 101)
EventType:'mouseover', //(optional) the event type to execute the zoom (see Note 3). (string, default = 'mouseover')
Group:'pets' //(optional) only one image of the same group may be zooed in. (string, default = 'mouseover')
});
// Note 1:
// All options with the exception of 'ClassName' may be specified in the image class name.
// An additional option may be specified in the image class name 'ZoomSRC' to assign a spoecific src to the zoom image.
//
// Note 2:
// modes = 'center', 'centerleft', 'centerright', 'centerup', 'centerdown', 'downright', 'downleft', 'upleft' or 'upright'.
//
// Note 3:
// The valid event types are:
// 'mouseover', 'mouseup', 'mousedown' or 'click'.
// for 'mouseover' the zoom out event is 'mouseout'.
/*]]>*/
</script>
</body>
</html>
Hello, Vic.
Thanks for the code; I have it working as required. However, it's disabled the on-click pop-up rear cover image function.
The pop-up image and pop-up video functions for each sales item use 'jquery.tools.min.js' (here) and 'overlay.js'.
Code:
//overlay.js
$(function() {
$("button[rel]").overlay({ // setup overlay actions to buttons
effect: 'apple', // use the Apple effect for overlay
expose: '#789',
onLoad: function(content) {
this.getOverlay().find("a.player").flowplayer(0).load(); // find the player contained inside this overlay and load it
},
onClose: function(content) {
$f().unload();
}
});
$("a.player").flowplayer("flowplayer-3.2.7.swf"); // install flowplayers
});
$(document).ready(function() {
$("img[rel]").overlay({
top: 5})
});
The HTML looks like this (staying with the Egyptian theme):
Code:
...
<div class="item-pic" id="cleo" style="z-index:10000">
<img class="resize" src="http://i483.photobucket.com/albums/rr193/mattydragon_2008/web/cleo-1.jpg" rel="#cleo1" />
</div>
<div class="item-info">
<strong>Ancient Egyptians - The Real Cleopatra</strong><br /><br />
Click the picture to see the rear cover details<br /><br />
<button rel="#cleo2">Play video preview</button>
...
'rel="#cleo1"' referring to a div at the bottom of the document containing the rear cover picture and 'rel="#cleo2"' referencing a div housing the pop-up video preview.
It seems, no matter where I place 'rel="#cleo1"' in the image tag in your code, the pop-up rear cover picture remains non-functional. I've also experimented with both 'overlay.js' and the stylesheet, without success.
As you've probably realised, I'm no Javascript jockey.
I think I've covered everything. Any suggestions would be appreciated.
I have tried to set this up off line but I get error at the lines in red
Code:
$(function() {
$("button[rel]").overlay({ // setup overlay actions to buttons
effect: 'apple', // use the Apple effect for overlay
expose: '#789',
onLoad: function(content) {
this.getOverlay().find("a.player").flowplayer(0).load(); // find the player contained inside this overlay and load it
},
onClose: function(content) {
$f().unload();
}
});
$("a.player").flowplayer("http://dragonsoftwales.co.uk/flowplayer-3.2.7.swf"); // install flowplayers
});
aan you put to gether example code I can run off line?
I was missing the j-flow link
however I found that if I used the J-min you posted it works
but if I used the j-min link on your page it did not!
Hi, Vic.
Those lines refer to the flowplayer .swf files which are in the main directory along with the HTML pages and only used by the video previews that occur when the 'play video preview' button is clicked.
They are the actual player, flowplayer-3.2.7.swf > here (too big to attach) and it's controls, flowplayer.controls-3.2.5.swf > here & attached.
The javascript for both the video and picture overlays is combined in overlay.js and both use jquery.tools.min.js.
I hope this helps, and thanks for the time you're spending on it. I hope it's not driving you as crazy as it is me.
Hi, Vic.
Funny about those scripts... both the same file and the one you posted isn't working for me. I'll keep working with it.
Thanks again for the help.
Before you post, read our: 
