vertical image centering onClick

**RolandPoort** · 12-28-2008, 02:00 PM

Hello

I'm struggling with the following;
I'm working with a swap imgage function witch gives a bigger image onClick.
The thing is when the image is clicked it gets bigger but the scrollbar doesn't automaticly scrolls down to show the bigger image.

I've tried anchors but this is nog giving me the solution.

Would it be possible that onClick the screen will be surrounding the image so the image is in vertical centered position?

Thanks!

Roland

**Snookerman** · 12-28-2008, 02:04 PM

Could you please post a link to your site or attach the code you are using?

**RolandPoort** · 12-28-2008, 02:14 PM

<img src="IMAGES/AM/AM-TH-01.jpg" swap="IMAGES/AM/AM-01.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-02.jpg" swap="IMAGES/AM/AM-02.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-03.jpg" swap="IMAGES/AM/AM-03.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-04.jpg" swap="IMAGES/AM/AM-04.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
 
<img src="IMAGES/AM/AM-TH-05.jpg" swap="IMAGES/AM/AM-05.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-06.jpg" swap="IMAGES/AM/AM-06.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-07.jpg" swap="IMAGES/AM/AM-07.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-08.jpg" swap="IMAGES/AM/AM-08.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
 
<img src="IMAGES/AM/AM-TH-09.jpg" swap="IMAGES/AM/AM-09.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-10.jpg" swap="IMAGES/AM/AM-10.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-11.jpg" swap="IMAGES/AM/AM-11.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-12.jpg" swap="IMAGES/AM/AM-12.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
 
<img src="IMAGES/AM/AM-TH-13.jpg" swap="IMAGES/AM/AM-13.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-14.jpg" swap="IMAGES/AM/AM-14.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-15.jpg" swap="IMAGES/AM/AM-15.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">
<img src="IMAGES/AM/AM-TH-16.jpg" swap="IMAGES/AM/AM-16.jpg" onClick="swapVal(this,'selVal1')" class="tb-small">



website (when online with laptop) http://10.0.1.200/~Roland/tb/
(press firstlink a magazine to see problem0

**magicyte** · 12-29-2008, 02:44 AM

You can give the larger image an image and upon clicking the smaller image, the url adds '#' to the end of the url + the image's id.

**RolandPoort** · 12-29-2008, 08:52 AM

Thanks.
I'm sorry but i dont get it.
You mean that i need to gif the Larger image an <a href?>
Is it possible for you to write an line for me to see how it works?

**vwphillips** · 12-29-2008, 10:12 AM

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>
<script  type="text/javascript">
/*<![CDATA[*/
function Enlarge(img){
 img.height="300"
 window.scroll(0,zxcPos(img)[1]-(zxcWWHS()[1]/2-img.height/2));
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;
}


/*]]>*/
</script></head>

<body>
<div style="height:400px;" ></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" onclick="Enlarge(this);" />
<div style="height:600px;" ></div>
</body>

</html>

**RolandPoort** · 12-29-2008, 01:11 PM

Thanks a lot!
It works quite ok!
The only thing is cant give my images a static size (you have height 300px).
I have a lot of diffrent sizing. What would be nice if i can say on click enlarge image *2. So the height and width will multiply by two. Or that the graphic onclick will be original size.

In my prvious script i had onClick the bigger image and if i clicked the second time it would return to the smaller image. Would this be possible?

Thanks a lot so far!

Roland

**vwphillips** · 12-29-2008, 03:37 PM

I used img.height="300" to simulate enlarging the image.

leave this line out and call the function afer the image has been enlarged or when ever you wish the vertically center an image.

**RolandPoort** · 12-29-2008, 04:08 PM

Thanks,
I now call the function as second after the old function
I'm a big fan of using as less scripts as possible. So i rather had 1 then 2 diffrent ones.
It's working, thanks!

but do you think its possible to say img.height="200%" img.width="200%" ?

it wil save me the other script

**vwphillips** · 12-29-2008, 04:26 PM

or even

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>
<script type="text/javascript">
/*<![CDATA[*/
// Window Scroll (29-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk


// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcScroll(srt,fin,ms,curve);'
// where:
// parameter 0 = the start position of the effect.                                                     (digits)
// parameter 1 = the finish position of the effect.                                                    (digits)
// parameter 2 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                          (string)
//                'sin' progression starts fast and ends slow.
//                'cos' progression starts slow and ends fast.
// parameter 3 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 1000 milliSeconds)
//


// **** Functional Code - NO NEED to Change


function zxcScroll(srt,fin,curve,ms){
 var oop=window.scrolloop;
 if (oop){
  clearTimeout(oop.to);
  oop.update([srt,fin],ms);
 }
 else window.scrolloop=new zxcBAnimatorOOP(srt,fin,curve,ms);
}

function zxcBAnimatorOOP(srt,fin,curve,ms){
 this.to=null;
 this.update([srt,fin],curve,ms);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,curve,ms){
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.ms=ms||1000;
 this.x=zxcScrollX();
 this.sf=[srtfin[0],srtfin[1]];
 this.inc=Math.PI/(2*this.ms);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 window.scroll(this.x,(this.curve=='s')?Math.floor((this.sf[1]-this.sf[0])*Math.sin(this.inc*ms)+this.sf[0]):(this.curve=='c')?(this.sf[1])-Math.floor((this.sf[1]-this.sf[0])*Math.cos(this.inc*ms)):(this.sf[1]-this.sf[0])/this.ms*ms+this.sf[0]);
 if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
 }
}

function zxcScrollX(){
 if (window.innerHeight) return window.pageXOffset;
 else if (document.documentElement.clientHeight) return document.documentElement.scrollLeft;
 return document.body.scrollLeft;
}

/*]]>*/
</script>

<script  type="text/javascript">
/*<![CDATA[*/
function Enlarge(img,ms){
 zxcScroll(zxcWWHS()[3],zxcPos(img)[1]-(zxcWWHS()[1]/2-img.offsetHeight/2),'sin',ms);
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;
}


/*]]>*/
</script></head>

<body>
<div style="height:400px;" ></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" onclick="Enlarge(this,1000);" />
<div style="height:600px;" ></div>
</body>

</html>

Thread: vertical image centering onClick

Thread Tools

Search Thread

vertical image centering onClick

Bookmarks

Bookmarks

Posting Permissions