Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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.

    Link to jquery.min.js

    pic-expand.js code:
    Code:
    //<![CDATA[ 
    $(window).load(function(){
    var current_h = null;
    var current_w = null;
    $('.resize').hover(
        function(){
            current_h = $(this, 'img')[0].height;
            current_w = $(this, 'img')[0].width;
            $(this).stop(true, false).animate({width: (280), height: (400)}, 300);
        },
        function(){
            $(this).stop(true, false).animate({width: 140, height: 200}, 300);
        }
    );
    });//]]>
    Last edited by Kor; 11-29-2011 at 10:56 AM. Reason: setting the prefix to JQuery

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,908
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Suggest you post this in the jQuery (Javascript Frameworks) section of the forum. Ask a mod to move the thread over.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Damn! I thought I had... must have been two clicks ago. Thanks for pointing it out. How do I go about making that request?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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)

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <div class="simple_overlay" id="cleo1"><img src="http://i483.photobucket.com/albums/rr193/mattydragon_2008/cleo-2.jpg" /></div>
    <div class="overlay" id="cleo2"><a class="player" href="http://vid483.photobucket.com/albums/rr193/mattydragon_2008/cleo-3.mp4">&nbsp;</a></div>
    Both 'simple_overlay' and 'overlay' divs being rendered invisible in the stylesheet.
    Code:
    .overlay {
    	padding:40px;	
    	width:600px; 
    	display:none;
    	background-image:url(../images/white.png);
    	z-index:10000;		
    }
    
    .simple_overlay {
    	display:none;
    	z-index:10000;
     	top: 0;
    	background-color:#333;
    	width:463px;	
    	min-height:670px;
    	border:1px solid #666;
    	-moz-box-shadow:0 0 90px 5px #000;
    	-webkit-box-shadow: 0 0 90px #000;	
    }
    The live page referred to above is here.

    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.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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!

    see

    http://www.vicsjavascripts.org.uk/Im...mII/111202.htm

    I will not be leaving it too long as it takes up too much space
    Last edited by vwphillips; 12-02-2011 at 12:06 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Attached Files Attached Files

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    I was updating post 7 when you posted

    please read post 7

    the latest issue of my script

    http://www.vicsjavascripts.org.uk/Im...mageZoomII.htm
    Last edited by vwphillips; 12-02-2011 at 12:26 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    ofnonation (12-02-2011)

  • #10
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •