Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: vertical image centering onClick

  1. #1
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation vertical image centering onClick

    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

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Could you please post a link to your site or attach the code you are using?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    <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

  4. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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.

  5. #5
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>

  7. #7
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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.

  9. #9
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>

Bookmarks

Posting Permissions

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