PDA

View Full Version : 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
<p class="tb-inspringen">

<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">
<br>
<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">
<br>
<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">
<br>
<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">

</p>

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
<!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


<!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>

RolandPoort
12-29-2008, 04:57 PM
that's also super!
You are fast dude.

You've made my day!

Thanks